/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  HOCWS :: House Of Concepts Website — CSS Styles Part 2 of 6
  Project: House Of Concepts Web Site (HOCWS) — www.houseofconcepts.co.za
  Generated: 2026-08-08T11:55:59+1000
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Continuation from styles_001.css
  This file contains: focus + skip link, header/nav/globe dropdown,
    the dark full-bleed hero with taupe eyebrow + monogram watermark,
    and the buttons.
  Content continues in styles_003.css (carousel).
*/

/* ============================================================
   SECTION 4: FOCUS + SKIP LINK (accessibility)
   -- Ava: the skip link is a secret shortcut that appears when
     someone uses the Tab key instead of a mouse!
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--clr-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-md);
  top: -60px;                       /* hidden above the viewport */
  z-index: 3000;
  background: var(--clr-charcoal);
  color: var(--clr-white);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  transition: top var(--trans-fast);
}
.skip-link:focus { top: var(--sp-sm); text-decoration: none; }

/* ============================================================
   SECTION 5: HEADER (Logo left + Nav + Globe lang icon right)
   ---------------------------------------------------------
   -- The header is a horizontal bar at the top of every page.
   -- Warm off-white bar, charcoal text, taupe accents. Sticky,
     and it shrinks a little once you scroll (JS adds .shrunk).
   ============================================================ */
.site-header {
  background-color: var(--clr-light);
  color: var(--clr-charcoal);
  height: var(--header-height);
  position: sticky;        /* Stays at top when user scrolls */
  top: 0;
  z-index: 1000;           /* Above everything else */
  box-shadow: var(--shadow-sm);
  border-bottom: var(--frame-thin) solid var(--clr-hairline);
  transition: box-shadow var(--trans-normal), height var(--trans-normal);
}

/* -- Jacques: "position: sticky" plus "top: 0" makes the header
   follow the user as they scroll down. It's like a magnet at the
   top of the screen. "z-index: 1000" ensures nothing covers it. */

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;         /* Center the container */
  padding: 0 var(--sp-lg);
  height: 100%;
  display: flex;
  align-items: center;    /* Vertical centering */
  justify-content: space-between; /* Logo left, nav center, globe right */
  gap: var(--sp-md);
  transition: height var(--trans-normal);
}

/* Shrink-on-scroll state (JS adds .shrunk after 80px of scroll) */
.site-header.shrunk { height: 56px; box-shadow: var(--shadow-md); }
.site-header.shrunk .header-inner { height: 56px; }
.site-header.shrunk .header-logo img,
.site-header.shrunk .header-logo-img { height: 34px; }

/* Logo container */
.header-logo {
  flex-shrink: 0;         /* Never shrink the logo */
  display: flex;
  align-items: center;
}

.header-logo img,
.header-logo-img {
  height: 44px;           /* Default logo height */
  width: auto;
  transition: height var(--trans-normal);
}

/* -- Ryan: "flex-shrink: 0" means "don't squish me!"
   Even if there's no room, the logo stays its full size. */

/* Navigation menu */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.header-nav a {
  position: relative;     /* anchor for the active underline */
  color: var(--clr-charcoal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--trans-fast), color var(--trans-fast);
}

.header-nav a:hover,
.header-nav a:focus {
  color: var(--clr-taupe-dark);
  background: none;
  text-decoration: none;
}

/* Current page: a quiet taupe-dark underline, not a loud badge */
.header-nav a.active {
  color: var(--clr-charcoal);
  background-color: transparent;
  text-decoration: none;
}
.header-nav a.active::after {
  content: "";
  position: absolute;
  left: var(--sp-sm);
  right: var(--sp-sm);
  bottom: -2px;
  height: 2px;
  background: var(--clr-taupe-dark);
  border-radius: 2px;
}

/* Contact pill — the single most important nav item.
   Taupe fill + charcoal text (4.58:1, AA pass). */
.header-nav a.nav-cta {
  background: var(--clr-taupe);
  color: var(--clr-charcoal);
  border-radius: 999px;
  padding: var(--sp-xs) var(--sp-md);
  margin-left: var(--sp-xs);
  font-weight: 700;
}
.header-nav a.nav-cta:hover,
.header-nav a.nav-cta:focus {
  background: var(--clr-taupe-dark);
  color: var(--clr-white);          /* white on taupe-dark = 5.3:1, AA */
  text-decoration: none;
}
.header-nav a.nav-cta.active { color: var(--clr-charcoal); }
.header-nav a.nav-cta.active::after { display: none; }

/* Hamburger: visible charcoal on the light header */
.hamburger {
  display: none;            /* Hidden on larger screens */
  background: none;
  border: 2px solid var(--clr-charcoal);
  border-radius: var(--radius-sm);
  color: var(--clr-charcoal);
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: var(--sp-xs);
  align-items: center;
  justify-content: center;
}
.hamburger:hover { border-color: var(--clr-taupe-dark); color: var(--clr-taupe-dark); }

/* Globe language icon (top-right) */
.header-lang {
  flex-shrink: 0;
  position: relative;     /* For dropdown positioning */
}

/* -- Ava: The globe button is like a little picture of the Earth.
   When you click it, a list of languages drops down! */

.lang-btn {
  background: none;
  border: 2px solid var(--clr-charcoal);
  color: var(--clr-charcoal);
  font-size: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), background-color var(--trans-fast);
}

.lang-btn:hover {
  border-color: var(--clr-taupe-dark);
  background-color: rgba(164, 156, 144, 0.15);   /* soft taupe wash */
}

/* Language dropdown menu */
.lang-dropdown {
  display: none;              /* Hidden by default */
  position: absolute;
  top: calc(100% + 8px);     /* 8px below the globe button */
  right: 0;
  background-color: var(--clr-white);
  color: var(--clr-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
}

.lang-dropdown.open {
  display: block;             /* Shown when .open class is added by JS */
}

.lang-dropdown a {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  color: var(--clr-text);
  font-size: 0.9rem;
  transition: background-color var(--trans-fast);
}

.lang-dropdown a:hover,
.lang-dropdown a.active-lang {
  background-color: var(--clr-taupe);
  color: var(--clr-charcoal);       /* charcoal on taupe = 4.58:1, AA */
  text-decoration: none;
}

/* ============================================================
   SECTION 6: HERO — full-bleed dark band (Decision 0035, D9)
   ---------------------------------------------------------
   -- Unlike the sibling site's rounded dark card on a light page,
     the HOCWS hero IS the dark band, edge to edge: charcoal field,
     white taglines, one tracked taupe eyebrow, and the big H+C
     monogram as a quiet watermark on the right.
   -- The full-bleed trick: box-shadow paints the colour 100vmax
     past both sides and clip-path trims it back to the screen
     edges — so the band bleeds without causing sideways scrolling,
     even though .hero lives inside the padded .site-main.
   ============================================================ */
.hero {
  position: relative;
  background: var(--clr-charcoal);
  box-shadow: 0 0 0 100vmax var(--clr-charcoal);
  clip-path: inset(0 -100vmax 0 -100vmax);
  color: var(--clr-white);
  text-align: center;
  padding: var(--sp-3xl) var(--sp-lg);
}

.hero-inner {
  position: relative;     /* keep the words above the watermark */
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Hero frame — the class stays (contract D12) but on HOCWS the
   "frame" is invisible: transparent and borderless inside the
   dark section. The dark band itself does the framing. */
.hero-frame {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--sp-2xl) var(--sp-xl);
  display: inline-block;
  max-width: 100%;
}

/* Tagline 1 = the taupe EYEBROW: small, wide-tracked capitals.
   Taupe is legal text here because the hero is charcoal (4.58:1). */
.hero-tagline-1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  color: var(--clr-taupe);
  margin-bottom: var(--sp-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
  text-wrap: balance;
}

/* Tagline 2 = the one and only headline */
.hero-tagline-2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--clr-white);
  margin-bottom: var(--sp-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  text-wrap: balance;
}

/* Tagline 3 = the quiet promise line (sentence case, soft grey —
   grey #CCCCCC on charcoal reads at ~7.5:1, comfortably AA) */
.hero-tagline-3 {
  font-family: var(--font-heading);
  font-weight: 700; /* only Archivo-700 is self-hosted; declaring the real weight kills synthetic-bold variance */
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  color: var(--clr-grey);
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 0;
  text-wrap: balance;
}

/* The monogram watermark (HOCWS_logo_large.png as an <img> in the
   HTML, aria-hidden). CSS only positions and fades it — it is
   decoration, so WCAG contrast rules do not apply to it. */
.hero-watermark {
  position: absolute;
  right: calc(0px - var(--sp-xl));
  top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 460px);
  opacity: 0.09;
  pointer-events: none;   /* clicks pass straight through */
  z-index: 0;
}

/* The one action inside the hero */
.hero-cta { margin-top: var(--sp-lg); }

/* ============================================================
   SECTION 7: BUTTONS
   ---------------------------------------------------------
   -- The class name .btn-amber stays (contract D12) but the paint
     is taupe. ONE treatment everywhere, on dark and light:
     taupe fill + charcoal text at rest (4.58:1, AA pass),
     white fill + charcoal text on hover (12.4:1 on the dark
     bands; on light bands the lift + shadow carry the change).
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: var(--sp-sm) var(--sp-xl);
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast),
              transform var(--trans-fast), box-shadow var(--trans-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-amber { background: var(--clr-taupe); color: var(--clr-charcoal); }
.btn-amber:hover,
.btn-amber:focus { background: var(--clr-white); color: var(--clr-charcoal); }

/* Content continues in styles_003.css (carousel) */