/* ==========================================================================
   Hartwell Recruitment: brand stylesheet
   Brand colours:  Navy #0D203B  /  White #FFFFFF
   Brand fonts:    Headings: "The Seasons"   (Canva font, see note below)
                    Body:    "Helvetica World" (Canva font, see note below)
   ========================================================================== */

/*
  FONT FILES
  ----------
  "The Seasons" and "Helvetica World" are licensed via Canva and aren't
  available as free web fonts, so they can't be loaded from Google Fonts.
  Until you export/licence the actual font files (.woff2) for web use,
  this stylesheet falls back to Playfair Display (headings) and system
  Helvetica/Arial (body), visually close, so the site should look right
  even before the real fonts are dropped in.

  Once you have the .woff2 files, add them to the /fonts folder and
  uncomment the @font-face rules below.
*/

/*
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica World";
  src: url("../fonts/HelveticaWorld-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --navy: #0D203B;
  --white: #FFFFFF;
}

body {
  font-family: "Helvetica World", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--navy);
}

.font-brand-serif {
  /* Cormorant Garamond, not Playfair Display: Playfair's "f" glyph is
     drawn with a long terminal that overlaps the dot of a following "i"
     by design (e.g. "find", "fit"), which no amount of disabling
     ligatures/kerning can fix. Cormorant Garamond doesn't have this
     problem and reads as an equally elegant, thin display serif. */
  font-family: "The Seasons", "Cormorant Garamond", Georgia, serif;
  font-variant-ligatures: no-common-ligatures;
  font-kerning: none;
  -webkit-font-feature-settings: "liga" 0, "clig" 0, "kern" 0;
  font-feature-settings: "liga" 0, "clig" 0, "kern" 0;
}

/* Typographic scale, mirrored from the reference template */
.h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .h1 { font-size: 3.5rem; }
}

.h2 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .h2 { font-size: 2.5rem; }
}

.h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
}
@media (min-width: 768px) {
  .h3 { font-size: 1.875rem; }
}

.h4 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 150ms ease-in-out;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--navy);
  color: var(--white);
}
.btn-primary:hover {
  background-color: #16305a;
}

.btn-outline {
  background-color: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-outline:hover {
  background-color: var(--navy);
  color: var(--white);
}

.btn-outline-light {
  background-color: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn-outline-light:hover {
  background-color: var(--white);
  color: var(--navy);
}

/* Hero diagonal clip, matching the reference template's angled section break */
.hero-clip {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
}
@media (min-width: 768px) {
  .hero-clip {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7rem), 0 100%);
  }
}

/* Logo placeholder: swap this out for a real <img> once the logo file is in /images */
.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
}

/* Icon circle used across specialisms / values grids */
.icon-circle {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  color: var(--white);
  flex-shrink: 0;
}

/* Simple mobile nav toggle (no framework dependency) */
#mobile-nav {
  display: none;
}
#mobile-nav.open {
  display: block;
}