/* =====================================================================
   GOKUDO site chrome: the layer every view shares. This covers the reset,
   typographic base, banner, the menu panel that drops out of it, section
   labels, scroll reveal, footer, and the toast. It loads site-wide (see
   inc/assets.php). The front page and every subpage share this one copy.
   Page layout lives in the per-view stylesheet next to this one. Design
   variables and @font-face come from style.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   z-index ladder: the values actually in use across assets/css, low to high.
   This is the single reference. Do not renumber a value without checking
   every file that uses it.
     0        hero-stage: hero background layer, sits behind its own content
     1        .bignum: oversized decorative watermark numerals
     2        in-section content stacked above decorative backgrounds/underlines
              (gal-stage img, theory-grid, manifesto, process, artcta-in text, etc.)
     3        small in-card overlays and captions (.edge, .cap)
     4        card badges/tags and the hero-foot bar (.pc-marks, gallery nav arrows)
     5        the wishlist heart on the product card (.pc-wish)
     6        topmost per-card overlay (.gw-remove)
     200      header.banner: sticky site header, and the menu panel that drops out of it
     300      .cart-overlay: cart drawer backdrop
     301      .cart-drawer: cart drawer panel (above its own backdrop)
     400      .toast: toast notifications (above the cart drawer)
     500      .sizeguide-overlay: size guide modal (topmost)
   --------------------------------------------------------------------- */

/* ---- base reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
/* Form controls do not inherit the page face on their own. The banner cart count, the
   gallery arrows, and the drawer close button are all buttons. Without this rule, they
   fall to the browser default. */
button,input,select,textarea{font-family:inherit}
/* The banner is sticky, so a fragment target, such as an FAQ question on Support, stops
   below it and not under it. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--banner-h) + 24px)}
/* The flex column makes the footer sticky. Without it, a view with short content ends
   above the bottom of a tall window. Examples include an untyped search, a 404, an
   empty cart, and a short legal page. This leaves the page ground visible under the
   footer. Kadence ships a footer-on-bottom class on <body> for this case, but that
   class's rule targets #wrapper. This theme's header.php never renders #wrapper, so
   nothing here answers that rule. main is the only body child that grows. The cart
   drawer and its overlay use position:fixed, and the toast is empty, so none of them
   becomes a flex item that moves. */
body.gk-page,body.gokudo-home{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
	min-height:100vh;display:flex;flex-direction:column}
/* The admin bar is 32px of fixed chrome above the document, 46px below 783px. Without
   these a signed-in admin gets a scrollbar exactly that tall on every short view. */
body.gk-page.admin-bar,body.gokudo-home.admin-bar{min-height:calc(100vh - 32px)}
@media(max-width:782px){body.gk-page.admin-bar,body.gokudo-home.admin-bar{min-height:calc(100vh - 46px)}}
main{flex:1 0 auto}
body.gk-page ::selection,body.gokudo-home ::selection{background:var(--blue);color:var(--on-dark)}
/* The link reset scores (0,1,2). A link color rule of 1 class scores (0,1,0) and loses
   with no error, so it must carry the body class too. */
body.gk-page a,body.gokudo-home a{color:inherit;text-decoration:none}
body.gk-page img,body.gokudo-home img{display:block;max-width:100%}
/* A theme image is a <picture> element around its <img> (inc/images.php). display:contents
   removes the box of the <picture>, so each rule on an <img> sizes it as if the <picture>
   were not there. */
body.gk-page picture,body.gokudo-home picture{display:contents}
/* Kadence colors h1-h6 and the form fields by bare element selector, from its own
   palette. An element rule beats inheritance whatever its weight, so headings read navy.
   This rule scores (0,0,2), over Kadence's element rules and under every class rule here.
   Do not raise it: a heading or a label that states its own color must still win. */
body:where(.gk-page,.gokudo-home) :is(h1,h2,h3,h4,h5,h6,label,input,select,optgroup,textarea){color:inherit}
/* Nothing in this design is rounded, but Kadence rounds every form control by 3px. This
   comes from two rules of Kadence's own, at two different weights, and this file must
   answer both.
   The first Kadence rule names button, .button, .wp-block-button__link, and the
   input[type=button|reset|submit] set. The selector below outscores it at (0,0,2), the
   same weight and for the same reason as the color:inherit line above. That weight sits
   over Kadence's element rules and under every class rule here. This lets a .dot, which
   is meant to be a circle, keep its 50% radius.
   The second Kadence rule lists the fifteen text-input types by attribute, so it scores
   (0,1,1). The theme's first selector, at (0,0,2), loses to it. The theme's second
   selector answers it in the same shape, at (0,1,2).
   Without this rule the rounding lands unevenly. The banner's search and account
   controls are links, so neither Kadence rule matches them. The cart and menu controls
   are buttons, so the first Kadence rule matches them. The four icons are built to read
   as one row, and two of the four would carry a radius the other two do not. */
body:where(.gk-page,.gokudo-home) :is(button,input,select,textarea),
body:where(.gk-page,.gokudo-home) input[type]{border-radius:0}
/* Kadence adds a shadow to every control on hover or focus. The values are 0 15px 25px
   -7px on a button, and 0 5px 15px -7px on a focused field.
   No Customizer control can disable this shadow. Kadence emits the shadow twice: once
   in its generated inline CSS, and once from assets/css/global.min.css. Only the first
   responds to the buttons_shadow_hover setting. The second is a static file in the
   parent theme.
   Kadence sets the weight with its widest selector: .button:hover at (0,2,0), and
   input[type=text]:focus at (0,2,1). This rule names .button inside :is(), so it also
   reaches (0,2,1) and wins the tie on source order, because base.css loads after
   Kadence's file. The resting halves, the non-hover state, are left alone. They are
   fully transparent, and exist only so Kadence has a state to animate from.
   .pc-wish is excluded, because it is the one control that carries a shadow by design.
   Its own rule is in wishlist.css and covers the hovered case too, so Kadence's
   button:hover cannot take it either. */
body:where(.gk-page,.gokudo-home)
	:is(button,input,select,textarea,.button,.wp-block-button__link,.wp-element-button):is(:hover,:focus,:active,:focus-visible):not(.pc-wish){box-shadow:none}
/* The same Kadence rule also sets a background and a text color, and this file must
   answer those two as well. Their values come from --global-palette-btn-bg-hover and
   --global-palette-btn-hover, which resolve to Kadence's own palette. That palette is
   a Customizer setting, so it lives in the database, and the color it carries belongs
   to no token in DESIGN.md.
   An override cannot answer these two. CSS has no value that means "make this
   declaration go away", and a reset to transparent would strip the resting fill from
   every control whose own rule scores under Kadence's button:hover at (0,1,1). The
   four variables are pointed at GOKUDO tokens instead. Kadence's rule still fires,
   and now paints the primary CTA: var(--blue), and var(--ink) on hover.
   That is the fallback for a control this theme does not style, such as WooCommerce's
   shipping calculator. Every control the theme does style holds its own fill through
   :focus and :active, stated on its own resting rule. Search the stylesheets for
   ":focus,:active" to find them.
   The declaration sits on body, not on :root. A custom property resolves by
   inheritance, so a value on body shadows Kadence's :root value whatever the
   specificity, and whichever stylesheet loads last. */
body:where(.gk-page,.gokudo-home){
	--global-palette-btn-bg:var(--blue);
	--global-palette-btn:var(--on-dark);
	--global-palette-btn-bg-hover:var(--ink);
	--global-palette-btn-hover:var(--on-dark)}
/* Kadence clears the focus ring site-wide with *:focus{outline:0}, and offers the fill
   above in its place. A control that holds its own fill through :focus then shows
   nothing at all under the keyboard. This states the ring instead.
   :focus-visible, not :focus, so a pointer press leaves no mark on the control it
   releases. The subject list sits in :where(), which scores nothing, so the rule
   reaches (0,1,1). That is over Kadence's *:focus at (0,1,0), and under every field
   here that states outline:none and answers with a border of its own. */
body:where(.gk-page,.gokudo-home)
	:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.label{font-family:var(--label);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
/* Exception: --gold on light. This is the GOKUDO wordmark tint, not body copy. It
   renders the brand name inside .pname and the footer copyright. Gold is 1.7:1 on
   --bg2, which a mark to be recognized can take and text to be read cannot. */
.gk{color:var(--gold)}

/* ============ BANNER ============ */
header.banner{position:sticky;top:0;z-index:200;background:var(--ink);color:var(--on-dark)}
.banner-inner{position:relative;max-width:1320px;margin:0 auto;display:flex;align-items:stretch;height:var(--banner-h)}
/* The logo takes the free space. Every control after it sits against the right edge,
   no matter how many of them show at this width. */
.brand{display:flex;align-items:stretch;flex:none;margin-right:auto}
.brand .logo{display:flex;align-items:center;padding:0 26px}
.brand .logo img{height:32px;width:auto}

/* ---- The banner controls: four icon boxes, sized alike. Search and account are
   links. Cart and menu are buttons. The rule below covers both kinds, so the four read
   as one row. None of them carries a word. Every label lives in the menu panel instead.
   No rule sits between them: their padding does the separating, and the hover fill
   still reads the extent of each one. ---- */
.search-btn,.acct-btn,.cart-btn,.nav-toggle,
:is(.search-btn,.acct-btn,.cart-btn,.nav-toggle):is(:focus,:active){display:flex;align-items:center;justify-content:center;flex:none;
	gap:10px;background:transparent;color:var(--on-dark);border:none;
	padding:0 22px;cursor:pointer;transition:background .2s,color .2s}
.search-btn:hover,.acct-btn:hover,.cart-btn:hover,.nav-toggle:hover,.nav-toggle.is-open{background:var(--blue);color:var(--on-dark)}
/* The three sizes decrease because the glyphs do not carry the same amount of ink: the
   magnifier is mostly outline, the cart mostly strokes. They are set to look alike, not
   to measure alike, and they hold that ratio to the mark beside them. */
.search-btn svg{width:16px;height:16px}
.acct-btn svg{width:15px;height:15px}
.cart-btn svg{width:14px;height:14px}
.cart-count{min-width:18px;height:18px;padding:0 5px;background:var(--blue);color:var(--on-dark);font-size:10px;
	display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1;
	transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
/* The count sits on --blue itself once the button is hovered. It then inverts to keep
   a readable edge, instead of dissolving into the fill behind it. */
.cart-btn:hover .cart-count{background:var(--on-dark);color:var(--ink)}

/* ---- Menu: the toggle icon, and the panel it drops out of the banner. This is the
   theme's only navigation surface. The bar shows no links of its own at any width.
   There is one menu to render and one to style, and no second copy that can go out of
   sync with the assigned WordPress menu. Toggled by nav.js. ---- */
/* Three 2px bars sit in a 12px box, at 0 / 5 / 10. The middle bar is also where the
   outer two meet when the cross closes. Every offset is a whole pixel, because the bars
   are hairline-thin. A half-pixel top would render one of the three softer than the
   other two on a 1x screen. */
.nt-box{position:relative;width:18px;height:12px}
.nt-box span{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:top .3s,transform .3s,opacity .2s}
.nt-box span:nth-child(1){top:0}
.nt-box span:nth-child(2){top:5px}
.nt-box span:nth-child(3){top:10px}
.nav-toggle.is-open .nt-box span:nth-child(1){top:5px;transform:rotate(45deg)}
.nav-toggle.is-open .nt-box span:nth-child(2){opacity:0}
.nav-toggle.is-open .nt-box span:nth-child(3){top:5px;transform:rotate(-45deg)}

.gk-menu{position:absolute;top:100%;right:0;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - var(--banner-h));
	overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ink);color:var(--on-dark);
	border-top:1px solid var(--line-dark-2);opacity:0;visibility:hidden;transform:translateY(-10px);
	transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1),visibility .26s}
.gk-menu[hidden]{display:none}
.gk-menu.open{opacity:1;visibility:visible;transform:none}
.gk-menu-inner{display:flex;flex-direction:column;padding:0 0 24px}
/* Only reachable at <=560px, where the banner's search icon is hidden for room. */
.gk-menu-search{display:none;align-items:center;gap:12px;border-bottom:1px solid var(--line-dark);margin:0 26px 8px;padding:14px 0}
.gk-menu-search input{flex:1;min-width:0;background:transparent;border:none;color:var(--on-dark);font-family:var(--label);font-size:14px;letter-spacing:.06em;padding:8px 0;outline:none;-webkit-appearance:none}
.gk-menu-search input::placeholder{color:var(--on-dark-4)}
.gk-menu-search button{background:none;border:none;color:var(--on-dark);font-family:var(--display);font-size:22px;line-height:1;letter-spacing:var(--track-sm);cursor:pointer;flex:none}
.gk-menu-list{list-style:none;margin:0;padding:0}
.gk-menu-list li+li{border-top:1px solid var(--line-dark-2)}
.gk-menu-list a{display:block;padding:17px 26px;color:var(--on-dark);
	font-family:var(--display);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase;
	letter-spacing:var(--track-md);transition:background .2s,color .2s}
/* Current-page highlight. With a real menu, WordPress adds current-menu-item to the li. */
.gk-menu-list a:hover,.gk-menu-list .current-menu-item>a,.gk-menu-list .current_page_item>a,.gk-menu-list a.active{background:var(--blue);color:var(--on-dark)}
/* The account and cart icons above say nothing out loud. These two spell them out. */
.gk-menu-foot{display:flex;gap:10px;margin:20px 26px 0}
.gk-menu-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:15px;border:1px solid var(--line-dark);color:var(--on-dark);font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:background .2s,border-color .2s}
.gk-menu-btn:hover{background:var(--blue);border-color:var(--gold)}

/* ============ SECTION SHELL (shared section frame) ============ */
section{position:relative}

/* Scroll reveal: core.js adds the .in class when the element enters the viewport.
   This rule runs on the animation property, not transition, because transition is a
   single property. Any rule that styles its own hover on the same element competes for
   that property. .pcard and .featured each declare their own transition rule. Both
   files load after this one, and at the same weight (0,1,0), the later file wins the
   whole property outright. If reveal used transition too, its entrance would never
   run. animation is a separate property, so a card keeps its own transition and still
   gets the entrance.
   The hidden state applies only under html.gk-js, which header.php sets in <head>.
   Without JavaScript, nothing adds .in, so the element stays visible. */
.gk-js .reveal{opacity:0}
.reveal.in{animation:gk-reveal .9s cubic-bezier(.16,1,.3,1) both}
.reveal.d1{animation-delay:.1s}.reveal.d2{animation-delay:.2s}.reveal.d3{animation-delay:.3s}.reveal.d4{animation-delay:.4s}
@keyframes gk-reveal{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ============ FOOTER ============ */
/* The class, not the element: a <footer> inside an article or a card is not the site
   footer and takes none of this. */
.site-footer{background:var(--bg2);border-top:1px solid var(--line);padding:90px 0 40px}
/* A footer column with no links renders nothing, so only the brand block states a track.
   Each column that renders creates its own implicit 1fr track. repeat(auto-fit) cannot
   do this here: a track list that holds an fr value may not also hold an auto repeat. */
.foot-top{display:grid;grid-template-columns:1.4fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:48px;padding-bottom:70px;border-bottom:1px solid var(--line)}
.foot-brand img{height:60px;width:auto;margin-bottom:24px}
/* The brand block holds two paragraphs with different roles, so each states its own rule.
   A .foot-brand p selector would carry one more element in its specificity than .label and
   .foot-motto, and would take the size and the color of the motto away from them. */
.foot-blurb{color:var(--muted);font-size:15px;line-height:1.7;max-width:320px}
.foot-motto{margin-top:18px;color:var(--blue);letter-spacing:.22em}
/* The heading takes the line height and the size of the links below it, and its margin
   equals the 5px padding of one link. The gap from the heading to the first link is then
   the same as the gap between 2 links. The parent theme sets h5 to a line height of its
   own, so the inherit value is necessary. */
.foot-col h5{font-family:var(--label);font-size:14px;line-height:inherit;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:5px}
/* Each column is a nav menu, so wp_nav_menu wraps its links in a <ul>. The .foot-col a
   rule below styles a bare stack of block links, so the list adds no marker and no
   indent. */
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a{display:block;color:var(--faint);font-size:14px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:34px;flex-wrap:wrap}
.foot-bottom .copy{color:var(--faint);font-size:12.5px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--faint);font-size:12.5px;transition:color .2s}
.foot-links a:hover{color:var(--ink)}

/* ============ TOAST ============ */
/* footer.php emits the toast on every view, so its styling belongs here beside the
   footer, and not in the per-view stylesheets. A per-view copy could drift out of sync
   or go missing on some view. That would leave the toast unstyled and stuck in the
   document flow. No page shows this problem yet, only because of which pages happen to
   render a form that triggers a toast. */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(calc(100% + 40px));z-index:400;
	background:var(--ink);color:var(--on-dark);font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	padding:15px 24px;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s;font-weight:700;opacity:0;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* ============ RESPONSIVE (shared chrome) ============ */
@media(max-width:980px){
	.wrap{padding:0 24px}
	.foot-top{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:36px}
}
@media(max-width:560px){
	/* --banner-h drops to 52px at this width. That override sits beside the value it
	   replaces, in style.css's :root, not here. */
	/* Four icon buttons do not fit beside the logo on a phone. This rule hides the
	   search icon, and the panel's own search field replaces it. */
	.search-btn{display:none}
	.gk-menu-search{display:flex}
	.acct-btn,.cart-btn,.nav-toggle{padding:0 16px}
	/* Full bleed at this width: a 360px panel would hang off the right edge of a 375px
	   screen. That leaves a sliver of page beside it, which reads as a mistake. */
	.gk-menu{left:0;right:0;width:auto}
	.gk-menu-list a{padding:20px 26px;font-size:clamp(34px,9.5vw,50px)}
	.foot-top{grid-template-columns:1fr;grid-auto-flow:row}
}
/* The reduced-motion case removes the whole entrance, not just the travel: the element
   is present from the start. animation:none also drops the both fill mode,
   which otherwise holds opacity at 1 after the animation ends. This rule states
   opacity:1 explicitly to replace it. */
@media (prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1!important;transform:none!important;animation:none!important}}