/**
 * The footer's mobile accordions.
 *
 * WHY THIS FILE IS THE FOOTER'S ONLY STYLESHEET, and is very small. The footer
 * is an Elementor Theme Builder template (tools/build-footer.php) and its
 * typography travels inline with the markup that inc/footer-parts.php prints --
 * see that file's "STYLING IS INLINE" note for why. Nothing here restates any
 * of it. This file styles only the parts that inline styles cannot reach: the
 * collapsed state, the transition, the chevron, and the hover colours the
 * parent theme would otherwise impose on a <button> that did not exist when
 * those decisions were made.
 *
 * EVERY RULE IS INSIDE THE MOBILE MEDIA QUERY except the parent-theme
 * overrides. Above the breakpoint this file must change nothing: the columns
 * sit side by side with their headings and links all visible, exactly as they
 * did before the accordions existed.
 *
 * @package kitchensmiths
 */

/* --- Below Elementor's mobile breakpoint --------------------------------
   767px, matching the `flex_direction_mobile` the footer row carries
   (tools/build-footer.php): that is the width at which the five columns stop
   sitting side by side and stack, and a stacked column is the only kind worth
   collapsing. assets/js/footer-accordion.js reads the same number, so the
   markup can never be a button at a width where this file has not styled it as
   one. */
@media (max-width: 767px) {
	/* THE 44px WAS NEVER MINE. The Elementor row holding the five footer
	   columns carries `flex_gap: 44px` and `flex_direction_mobile: column`
	   (tools/build-footer.php, $footer_main), so once the columns stack, every
	   section sits 44px below the last -- on top of the toggle's own padding and
	   the open panel's bottom padding. Tightening the accordion could never fix
	   that, because the space was between the columns, not inside them.

	   Selected by SHAPE, not by `.elementor-element-8874103`. That id is what
	   the live template happens to carry, and the footer is build-locked
	   precisely because it has been hand-edited since it was generated -- so an
	   id copied out of today's DOM is a selector that dies silently the first
	   time anyone rebuilds. "The container whose grandchildren are the footer
	   columns" stays true across a rebuild. :has() carries the specificity of
	   its most specific argument, which is what puts this above Elementor's own
	   `.elementor-element-<id>` rule without !important.

	   --row-gap as well as `gap`: Elementor emits `gap: var(--row-gap)
	   var(--column-gap)` on containers, so setting only the shorthand leaves the
	   custom property to win back in some versions. */
	.e-con:has(> .e-con > .elementor-widget-shortcode .ks-fcol) {
		--row-gap: 16px;
		gap: 16px;
	}

	/* The brand block -- logo, strapline, social -- is the first column in that
	   same row, so the tightened gap would pull the first accordion up against
	   the social links. It keeps roughly the separation it had; the change is
	   meant for the run of sections below it, which is what reads as a list. */
	.e-con:has(> .e-con > .elementor-widget-shortcode .ks-fcol) > .e-con:first-child {
		margin-bottom: 20px;
	}

	/* The heading and its chevron, once the script has wrapped them. Inherits
	   nothing from the parent theme's button styles because every property
	   those set is reset here.

	   THE DRAWER'S ROW, SET SMALLER. Same hairline at the same opacity, same
	   chevron, same Marcellus -- but at 18px against the drawer's 24px, and on
	   14px of padding against its 20px. The footer is the bottom of the page and
	   the drawer is the way around the site; matching them outright made three
	   footer sections shout as loudly as the primary navigation, which is what
	   "consistent" should not mean. Related, one step down.

	   (It was an 11px uppercase label before any of this, which was the opposite
	   error: the same control as the drawer's, dressed as a caption.) */
	.ks-fcol-toggle,
	.ks-fcol-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 14px 0;
		margin: 0;
		border: 0;
		border-bottom: 1px solid rgba(245, 242, 236, 0.14);
		border-radius: 0;
		background: transparent;
		text-align: left;
	}

	/* Only the real toggle is tappable. .ks-fcol-head is the Visit column's
	   heading row -- same row, no button, so it must not offer a pointer that
	   promises something to click. */
	.ks-fcol-toggle {
		cursor: pointer;
	}

	/* !important throughout, and only here, because these properties arrive as
	   an inline `style` attribute on the heading itself (KS_FOOTER_HEADING_STYLE
	   in inc/footer-parts.php -- see that file's "STYLING IS INLINE" note for
	   why the footer works that way). Inline styles outrank every selector, so
	   specificity cannot win this and nothing short of !important will. The
	   declarations are confined to the mobile media query, so the desktop footer
	   still renders exactly the inline styles the design specifies. */
	.ks-fcol-heading {
		font: 18px/1.2 Marcellus, serif !important;
		letter-spacing: normal !important;
		text-transform: none !important;
		color: var(--ks-cream, #F5F2EC) !important;
	}

	/* EVERY column heading, not only the three that collapse. "Visit" has no
	   links under it -- it is an address, a phone number and an email -- so it
	   never becomes an accordion, but it is still a footer column heading and
	   has to be set like the others; left at 11px uppercase it read as the one
	   the restyle forgot. Hence the rule above is on .ks-fcol-heading itself
	   and only the margin, which exists to close the gap under a heading that
	   has a panel beneath it, is scoped to the toggle. */
	.ks-fcol-toggle .ks-fcol-heading {
		margin-bottom: 0 !important;
	}

	/* The column's inline `gap: 13px` would otherwise open a gap between the
	   toggle row and the panel it controls, so a collapsed column would sit 13px
	   taller than its own border. */
	.ks-fcol {
		gap: 0 !important;
	}

	/* Same two-element shape, and for the same reason, as the header drawer's
	   accordions -- see the long note in assets/css/header.css. The outer
	   element animates the grid row; the inner one clips and is allowed to be
	   shorter than its content. */
	.ks-fcol-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 240ms cubic-bezier(0.2, 0, 0, 1);
	}

	.ks-fcol-panel.is-open {
		grid-template-rows: 1fr;
	}

	.ks-fcol-panel[hidden] {
		display: none;
	}

	/* Tight: an open footer section is a list of five or six links under a
	   heading, not a screen of its own. The drawer's 18/24/14 was simply too
	   much room at the bottom of a page. */
	.ks-fcol-panel-inner,
	.ks-fcol-body {
		overflow: hidden;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 2px !important;
		padding: 10px 0 16px;
	}

	/* The links, related to .ks-drawer-sublink without matching it: 15px at 0.8
	   rather than the drawer's 16px, and 32px rows rather than 44px.

	   32px, NOT 44px. The 44 came from misreading the requirement -- WCAG 2.2 SC
	   2.5.8 (Target Size (Minimum), AA) asks for 24x24; 44x44 is SC 2.5.5, which
	   is AAA and which nothing else in this footer claims. Six links at 44px
	   plus 14px gaps ran an open section to 348px, most of a phone screen, for a
	   footer. 32px clears the AA threshold with room to spare and reads as a
	   list again.

	   !important for the same reason as the heading above: these arrive as
	   KS_FOOTER_LINK_STYLE on the anchor's own style attribute. */
	.ks-fcol-panel-inner a,
	.ks-fcol-body a {
		display: flex !important;
		align-items: center;
		min-height: 32px;
		font: 300 15px/1.3 Jost, sans-serif !important;
		color: rgba(245, 242, 236, 0.8) !important;
	}

	/* The address and the week are blocks of text, not rows: they keep a
	   readable 1.7 leading and take no minimum height, or a three-line address
	   would be padded as though it were three tappable links. Sized to match the
	   links beside them so the column reads as one thing. */
	.ks-fcol-body > span {
		padding: 4px 0;
		font-size: 15px !important;
		line-height: 1.7 !important;
		color: rgba(245, 242, 236, 0.8) !important;
	}

	/* hello-elementor's `a:hover { color: #336 }` outranks an inline colour on
	   hover, so a tapped footer link went navy-on-navy. The drawer carries the
	   same override for the same reason (assets/css/header.css). Scoped to the
	   mobile query because that is where this file has taken ownership of these
	   links; the desktop footer is left exactly as it was. */
	.ks-fcol-panel-inner a:hover,
	.ks-fcol-panel-inner a:focus,
	.ks-fcol-body a:hover,
	.ks-fcol-body a:focus {
		color: rgba(245, 242, 236, 0.8) !important;
		background-color: transparent;
	}

	/* The drawer's chevron exactly: a rotated square drawn from two borders,
	   pointing down when the section is shut and up when it is open. Same size,
	   same brass, same 240ms -- these are the same gesture in two places and
	   should not read as two different controls. */
	.ks-fcol-chevron {
		display: block;
		flex: 0 0 8px;
		width: 8px;
		height: 8px;
		border-top: 1px solid var(--ks-brass, #B08D57);
		border-right: 1px solid var(--ks-brass, #B08D57);
		transform: rotate(135deg) translate(-2px, -2px);
		transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
	}

	.ks-fcol-toggle[aria-expanded="true"] .ks-fcol-chevron {
		transform: rotate(-45deg) translate(-2px, -2px);
	}
}

/* hello-elementor's reset gives every <button> on the site
   `button:hover, button:focus { background-color: #CC3366; ... }`. The footer
   had no buttons in it until these accordions, so nothing here had ever needed
   the override the header drawer already carries (see the equivalent block in
   assets/css/header.css). Without it, tapping a footer heading flashes it
   magenta. Outside the media query because a stale hover state must not
   survive a rotation back to a width where the rule stops applying. */
.ks-fcol-toggle:hover,
.ks-fcol-toggle:focus {
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: rgba(245, 242, 236, 0.14);
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.ks-fcol-panel,
	.ks-fcol-chevron {
		transition: none;
	}
}