/* =====================================================================
   GOKUDO: Support page.
   Page-specific only: page head, the shipping/returns/care list, the contact
   list, the FAQ accordion and its Expand All toggle, and the contact form.
   Banner, footer, toast, reveal, wrap, and font variables come from base.css
   (loaded site-wide) plus style.css. The two lists are the shared .gk-feature-list from
   components.css, so this file states only what this page changes about it:
   the track count, and the two lines the contact list carries under its copy.
   Loaded on the page:support context: registered in gokudo_pages()
   (inc/routing.php) and resolved by inc/assets.php, not by functions.php.

   The page reads top to bottom as four bands under the page head: what the
   store already answers, who to write to, what other people asked, and the
   form. A --line hairline opens each of the last three. The first states none,
   because .pagehead draws its own bottom edge and a second hairline there
   would double it.
   ===================================================================== */

/* ============ PAGE HEAD ============ */
/* Page head (breadcrumb + title) lives in components.css. Support uses the
   shared values except for the title size below: this page runs a slightly
   smaller H1 than cart/checkout/account/products. */
.pagehead{--ph-title-size:clamp(54px,7.4vw,112px)}
/* .ph-meta .lead is support-only: a single text value (no accent "em" span),
   not the count/em pattern of the shared .ph-meta .count. It uses the same size
   as .count, so the head meta has 1 size on every page. */
.ph-meta .lead{font-family:var(--display);font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:var(--track-md);color:var(--ink)}

/* ============ SHIPPING, RETURNS, CARE ============ */
/* The first band under the page head, and the only one that states no hairline: see
   the note at the top of this file. */
.info{padding:56px 0 64px;background:var(--bg)}
/* Every column here and in the contact list below is optional, so the track count
   follows the items the template renders rather than the shared three. auto-fit needs
   a length to count with, and 240px is under the narrowest column the design uses.
   The section class carries the override so it outscores the shared rule on weight
   instead of on order. */
.info .gk-feature-list>ul{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* The body is a rich_text field, so its paragraphs sit one level inside .gk-rich-text
   and are not the direct children the shared li>p rule reaches. */
.info .gk-rich-text p+p{margin-top:14px}
.info .gk-rich-text strong{color:var(--ink);font-weight:600}

/* ============ CONTACT ============ */
.contact{padding:74px 0 78px;background:var(--bg);border-top:1px solid var(--line)}
/* The same step as .lineup-head on the front page: a heading that opens a row of items
   sits one band under the page's own H1, which here is the 112px .ph-title below. */
.contact-head{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:.92;
	text-transform:uppercase;letter-spacing:var(--track-lg);margin-bottom:52px}
.contact-head em{font-style:normal;color:var(--blue)}
.contact .gk-feature-list>ul{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* The three descriptions run to different lengths, and each column ends with an address
   and a note. The column is a flex column so the address carries the push to its foot
   and the three addresses land on one line. */
.contact .gk-feature-list>ul>li{display:flex;flex-direction:column}
.contact .gk-feature-list>ul>li>p{margin-bottom:22px}
.contact a.mail{margin-top:auto;align-self:flex-start;font-family:var(--label);font-size:12px;letter-spacing:.08em;
	color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:3px;transition:.2s}
.contact a.mail:hover{color:var(--ink);border-color:var(--ink)}
.contact .hours{font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:14px}

/* ============ FAQ ============ */
.faq{padding:74px 0 30px;background:var(--bg);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.42fr 1fr;gap:60px;align-items:start;--faq-tools-h:22px;--faq-tools-gap:16px}
/* The aside is optional. Without it the question list takes the whole row. */
.faq-grid.is-full{grid-template-columns:1fr}
/* The cap top of the heading sits on the hairline over the first question.
   has-tools marks a list with the Expand All row over it, so the aside moves down by
   that row and its gap. Both lengths are fixed in .faq-tools below. The h2 then
   pulls up by the space between its line box and its cap top:
   line-height/2 + (ascent - descent)/2 - cap height, from the Manuka metrics
   (ascent .891, descent .125, cap height .748). */
.faq-grid.has-tools .faq-aside{margin-top:calc(var(--faq-tools-h) + var(--faq-tools-gap))}
/* The same step as .contact-head above and .lineup-head on the front page: each section
   heading on this page sits one band under the 112px .ph-title. The aside column is
   .42fr of the row, which holds a 76px heading of a word or two per line. */
.faq-aside h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:.92;text-transform:uppercase;letter-spacing:var(--track-lg);
	margin-top:calc(-1em * (.92 / 2 + (.891 - .125) / 2 - .748))}
.faq-aside h2 em{font-style:normal;color:var(--blue)}
/* The gap under the heading matches .reach-left p below. It hangs on h2+p, so a
   description without a heading stays level with the top of the list. */
.faq-aside p{color:var(--muted);font-size:15px;line-height:1.7;max-width:300px}
.faq-aside h2+p{margin-top:18px}
/* The Expand All / Collapse All toggle sits over the list, at its right edge. It is a
   text control in the treatment of the contact addresses above: --label, the accent
   color, and an underline. It is not a filled button, because it is a tool for the
   list and not an action of the view. The selector carries two classes, so it reaches
   (0,2,0) and outscores Kadence's button:hover fill at (0,1,1) in every state. */
.faq-tools{display:flex;justify-content:flex-end;align-items:flex-start;height:var(--faq-tools-h);margin-bottom:var(--faq-tools-gap)}
.faq-tools .faq-toggle{background:none;border:none;border-bottom:1px solid currentColor;padding:0 0 3px;cursor:pointer;
	font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);transition:color .2s}
.faq-tools .faq-toggle:is(:hover,:focus,:active){background:none}
.faq-tools .faq-toggle:hover{color:var(--ink)}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:22px;
	padding:24px 0;color:var(--ink);transition:color .2s}
.qa button:hover{color:var(--blue)}
.qa .qnum{font-family:var(--label);font-size:11px;letter-spacing:.12em;color:var(--blue);flex:none;width:30px}
/* A question is a sentence, so it is set in --body and not in --display: Manuka is a
   condensed display face, and six questions in it read as six headlines. 600 is the
   middle of Fraktion's three weights, enough to hold the row against the answer under
   it without setting the question in bold. */
.qa .qtext{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.5vw,20px);line-height:1.35;flex:1}
.qa .qmark{flex:none;width:22px;height:22px;position:relative}
.qa .qmark::before,.qa .qmark::after{content:"";position:absolute;background:currentColor;transition:transform .3s}
.qa .qmark::before{left:0;right:0;top:10px;height:2px}
.qa .qmark::after{top:0;bottom:0;left:10px;width:2px}
.qa.open .qmark::after{transform:scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.qa .ans-inner{padding:0 0 28px 52px;color:var(--muted);font-size:16px;line-height:1.75;max-width:680px}
.qa .ans-inner strong{color:var(--ink);font-weight:600}
.qa .ans-inner .han{font-family:var(--han);color:var(--blue)}
body.gk-page .qa .ans-inner a{text-decoration:underline;text-underline-offset:3px}
.qa .ans-inner p{margin-bottom:14px}
.qa .ans-inner p:last-child{margin-bottom:0}
.faq-empty{color:var(--faint);font-size:15px;line-height:1.7;padding:26px 0}

/* ============ CONTACT FORM ============ */
.reach{padding:90px 0;background:var(--bg)}
.reach-in{border:1px solid var(--line);background:var(--ink);color:var(--on-dark);display:grid;grid-template-columns:.85fr 1fr;overflow:hidden}
/* The left column is optional. Without it the form takes the whole row. */
.reach-in.is-full{grid-template-columns:1fr}
.reach-left{padding:clamp(36px,4vw,58px);position:relative;overflow:hidden;border-right:1px solid var(--line-dark-2)}
.reach-left .glyph{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--display);font-size:38vh;line-height:.8;color:var(--wash-dark);pointer-events:none}
.reach-left .mk{font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;position:relative;z-index:2}
.reach-left h2{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.6vw,54px);line-height:.92;text-transform:uppercase;letter-spacing:var(--track-md);position:relative;z-index:2;color:var(--on-dark)}
.reach-left h2 em{font-style:normal;color:var(--gold)}
.reach-left p{color:var(--on-dark-2);font-size:15px;line-height:1.7;margin-top:18px;max-width:340px;position:relative;z-index:2}
.reach-form{padding:clamp(36px,4vw,52px);display:flex;flex-direction:column;gap:16px;background:var(--surface);color:var(--ink)}
.reach-form .frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reach-form label{display:flex;flex-direction:column;gap:8px;font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.reach-form input,.reach-form textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:14px 14px;font-family:var(--body);font-size:14px;outline:none;transition:border-color .2s}
.reach-form input:focus,.reach-form textarea:focus{border-color:var(--blue)}
.reach-form textarea{resize:vertical;min-height:120px}
.reach-form button{margin-top:6px;border:none;cursor:pointer;font-size:12px;letter-spacing:.2em;padding:18px;transition:.2s}

/* ============ RESPONSIVE ============ */
/* The two feature lists need no breakpoint of their own: auto-fit drops a track as
   soon as 240px stops fitting, at every width. */
@media(max-width:980px){
	.faq-grid{grid-template-columns:1fr;gap:36px}
	/* The columns stack, so no hairline sits beside the heading. */
	.faq-grid.has-tools .faq-aside,.faq-aside h2{margin-top:0}
	.reach-in{grid-template-columns:1fr}
	.reach-left{border-right:none;border-bottom:1px solid var(--line-dark-2)}
}
@media(max-width:560px){
	.qa .ans-inner{padding-left:0}
	.reach-form .frow2{grid-template-columns:1fr}
}