/*
Theme Name: Kartobo
Theme URI: https://kartobo.com
Author: Kartobo
Description: Block theme for kartobo.com — cream and blue noticeboard look with handwritten headlines, pinned paper cards and taped polaroids. Built from the Kartobo design system.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kartobo
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }

/* ---------- Header ---------- */
.kb-header { padding-top: 16px; padding-bottom: 16px; }
.kb-header .kb-logo img { width: 150px; height: auto; display: block; }
.kb-header .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; }
.kb-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }
.kb-header .wp-block-button__link { padding: 12px 24px; }

/* ---------- Sections ---------- */
.kb-section { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); }
.kb-blue { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-blue); }
.kb-blue :where(h1, h2) { color: var(--wp--preset--color--on-blue); }
.kb-blue .kb-note { color: var(--wp--preset--color--on-blue-muted); font-size: 15px; }
.kb-blue a:not(.wp-block-button__link) { color: var(--wp--preset--color--on-blue); font-weight: 700; }
.kb-eyebrow { font-size: 14px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); margin: 0; }
.kb-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; max-width: 34em; }
.kb-muted { color: var(--wp--preset--color--ink-muted); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.kb-btn-paper .wp-block-button__link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border: 0; }
.wp-block-button.kb-btn-paper .wp-block-button__link:hover { background: #ffffff; color: var(--wp--preset--color--brand); }

/* ---------- Paper cards ---------- */
.kb-card { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); box-shadow: var(--wp--preset--shadow--card); padding: 32px 36px; }
.kb-blue .kb-card { box-shadow: var(--wp--preset--shadow--card-blue); }
.kb-card p { margin: 0; }
.kb-card .kb-muted { font-size: 16px; line-height: 1.45; }
.kb-rounded { border-radius: 12px; }
.kb-tilt-l { transform: rotate(-1deg); }
.kb-tilt-r { transform: rotate(1deg); }
.kb-num { font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--number) !important; line-height: 1 !important; color: var(--wp--preset--color--brand); margin: 0; }
.kb-num--orange { color: var(--wp--preset--color--number); }

/* Number row: big number beside a bold line */
.kb-numrow { display: flex; align-items: center; gap: 28px; padding: 16px 36px; }
.kb-numrow .kb-num { flex: none; width: 48px; }
.kb-numrow h3 { margin: 0; font-size: 26px; }

/* ---------- Call-out bar and sticker ---------- */
.kb-callout { display: inline-block; align-self: flex-start; font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--callout) !important; line-height: 1.1; padding: 20px 40px; border-radius: 12px; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-blue); transform: rotate(1deg); margin: 36px 0 0 !important; }
.kb-callout--yellow { background: var(--wp--preset--color--tape); color: var(--wp--preset--color--ink); }
/* Callouts: sit on the left edge of the 1240px content column at every screen width */
.is-layout-constrained > .kb-callout { display: block; width: fit-content; max-width: 100%; margin-top: 36px !important; margin-left: max(0px, calc((100% - 1240px) / 2)) !important; margin-right: auto !important; }
/* Links inside the white form card stay readable */
.kb-form a { color: var(--wp--preset--color--brand); text-decoration: underline; }
.kb-sticker { background: var(--wp--preset--color--tape); color: var(--wp--preset--color--ink); border-radius: 12px; padding: 16px 32px; transform: rotate(-2deg); }
.kb-sticker p { margin: 0; }
.kb-sticker a { color: inherit !important; text-decoration: none; }
.kb-sticker .kb-sticker__big { font-family: var(--wp--preset--font-family--hand); font-size: 48px; line-height: 1; }
.kb-sticker .kb-sticker__small { font-size: 16px; font-weight: 700; }

/* ---------- Polaroids ---------- */
.wp-block-image.kb-polaroid { position: relative; background: var(--wp--preset--color--paper); padding: 16px 16px 60px; box-shadow: var(--wp--preset--shadow--photo); margin: 0; }
.wp-block-image.kb-polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kb-polaroid.kb-rot-r { transform: rotate(3deg); }
.kb-polaroid.kb-rot-l { transform: rotate(-5deg); }
.kb-polaroid.kb-contain img { object-fit: contain; background: #ffffff; }
.kb-taped::before { content: ""; position: absolute; top: -16px; left: 50%; width: 150px; height: 38px; margin-left: -75px; background: var(--wp--preset--color--tape); opacity: .85; transform: rotate(-3deg); z-index: 1; }

/* Hero photo pile */
.kb-photos { position: relative; min-height: 540px; }
.kb-photos .kb-photo-a { position: absolute; top: 0; right: 0; width: 72%; }
.kb-photos .kb-photo-a img { height: 300px; }
.kb-photos .kb-photo-b { position: absolute; bottom: 0; left: 0; width: 50%; padding: 14px 14px 52px; }
.kb-photos .kb-photo-b img { height: 220px; }
.kb-photo-box img { height: 400px; }

/* ---------- Lesson steps (pinned cards) ---------- */
.kb-steps { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 64px 28px; padding-top: 24px; }
.kb-steps > * { margin: 0 !important; }
.kb-step { position: relative; text-align: center; padding: 52px 18px 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kb-step > * { margin: 0 !important; }
.kb-step:nth-child(odd) { transform: rotate(-1.5deg); }
.kb-step:nth-child(even) { transform: rotate(1.5deg); }
.kb-step h3 { font-family: var(--wp--preset--font-family--hand); font-weight: 400; font-size: 40px; line-height: 1; margin: 0; }
.kb-step .kb-muted { font-size: 15px; line-height: 1.45; }
.kb-step .kb-icon { line-height: 0; }
.kb-step .kb-icon svg { width: 72px; height: 72px; }
.kb-pin { position: absolute !important; top: -26px; left: 50%; margin: 0 0 0 -28px !important; width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--hand); font-size: 34px !important; line-height: 1 !important; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-blue); box-shadow: inset -4px -6px 0 #00000033, 4px 9px 10px #1c2b3a4d; }
.kb-pin::before { content: ""; position: absolute; top: 9px; left: 12px; width: 13px; height: 8px; border-radius: 999px; background: #ffffff59; transform: rotate(-30deg); }
.kb-step:nth-child(3n+2) .kb-pin { background: var(--wp--preset--color--tape); color: var(--wp--preset--color--ink); }
.kb-step:nth-child(3n+2) .kb-pin::before { background: #ffffff80; }
.kb-step:nth-child(3n+3) .kb-pin { background: var(--wp--preset--color--number); color: var(--wp--preset--color--paper); }
.kb-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -28px; width: 26px; height: 18px; margin-top: -9px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 12h28' stroke='%23f2c230' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M24 3l12 9-12 9z' fill='%23f2c230'/%3E%3C/svg%3E"); }

/* ---------- Demo form (Fluent Forms) ---------- */
.kb-form { padding: 36px; }
.kb-form .ff-el-input--label label { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink); }
.kb-form .ff-el-form-control { min-height: 48px; border: 1px solid #b9b3a3 !important; border-radius: 12px !important; font: inherit; }
.kb-form .ff-btn-submit { width: 100%; min-height: 56px; background: var(--wp--preset--color--brand) !important; color: var(--wp--preset--color--on-blue) !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 17px !important; }
.kb-form .kb-form-placeholder { border: 2px dashed #b9b3a3; border-radius: 12px; padding: 24px; color: var(--wp--preset--color--ink-muted); }

/* ---------- Footer ---------- */
.kb-footer { padding-top: 48px; padding-bottom: 56px; font-size: 15px; color: var(--wp--preset--color--ink-muted); }
.kb-footer a { color: var(--wp--preset--color--ink-muted); }
.kb-footer .kb-logo img { width: 120px; height: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
	.kb-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.kb-steps > .kb-step { grid-column: span 2; }
	.kb-steps > .kb-step:nth-child(4) { grid-column: 2 / span 2; }
	.kb-step::after { display: none; }
}
@media (max-width: 781px) {
	.kb-photos { min-height: 460px; margin-top: 24px; }
	.kb-photos .kb-photo-a img { height: 240px; }
	.kb-photos .kb-photo-b img { height: 170px; }
	.kb-photo-box img { height: 280px; }
	.kb-numrow { padding: 14px 20px; gap: 16px; }
	.kb-callout { padding: 16px 24px; }
}
@media (max-width: 640px) {
	.kb-steps { grid-template-columns: minmax(0, 1fr); }
	.kb-steps > .kb-step, .kb-steps > .kb-step:nth-child(4) { grid-column: auto; }
	.kb-form { padding: 24px; }
}