/* =====================================================

   EQUINE LINK — main.css

   Shared styles for every page:

   dials, reset, header, nav, hero, intro, contact, footer

   Page-specific styles live in their own files

   (about.css, education.css, equine.css, ...) and must

   NOT redefine the header/footer/nav rules below.

   ===================================================== */

/* ============ THE DIALS ============ */

/* Spec: Headings = Alegreya Sans (bold), Paragraphs = Alegreya Sans,

   Quote = Georgia Regular (Georgia is a system font — no web font needed) */

:root {

  --font-heading: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  --font-body: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  --font-script: "Great Vibes", cursive;

  --font-hero-script: "Dancing Script", cursive;   /* bold brush look for the hero "Welcome." */

  --color-bg: #faf8f4;

  --color-text: #3d3a34;

  --color-muted: #7d786e;

  --color-taupe: #9c8265;

  --color-cream: #f6f1e7;

  --color-gold: #d8b57e;

  --space: 1.5rem;

  --max-width: 44rem;

  --max-wide: 72rem;

}

/* ============ RESET ============ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {

  font-family: var(--font-body);

  color: var(--color-text);

  background: var(--color-bg);

  line-height: 1.6;

  /* sticky footer: footer always sits at the bottom of the page */

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

main { flex: 1; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.25; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* accessibility helper (hides text but keeps it for screen readers) */

.visually-hidden {

  position: absolute;

  width: 1px; height: 1px;

  margin: -1px; padding: 0;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

  border: 0;

}

/* ============ HEADER ============ */

/* These are the ONE header/logo/menu sizes for the whole site.

   Do not redefine them in page CSS files. */

.site-header {

  background:

    linear-gradient(rgba(233, 220, 192, 0.30), rgba(233, 220, 192, 0.30)),

    url("../img/background1.jpg") center / cover no-repeat;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}

.header-inner {

  width: 100%;

  min-height: 8.5rem;          /* taller header, matches the main site */

  padding: 1.25rem 3.5rem;     /* 56px side gutters */

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.75rem 2rem;

}

/* pushes the menu to the right edge, even when wrapped in <nav> */

.header-inner > nav { margin-left: auto; }

/* logo image contains the name + tagline, so it stands alone */

.logo {

  display: inline-flex;

  text-decoration: none;

  line-height: 0;

}

.logo__mark {

  height: 12rem;               /* ~192px */

  width: auto;

}

.nav__links {

  list-style: none;

  display: flex;

  align-items: center;

  gap: 2.75rem;                /* ~44px between items */

  margin-left: auto;

}

.nav__links a {

  font-family: var(--font-heading);

  font-size: 1.5rem;           /* bigger menu */

  letter-spacing: 0.02em;

  text-decoration: none;

  color: var(--color-text);

}

.nav__links a:hover,

.nav__links a.nav__active {    /* add class="nav__active" to the current page's link */

  border-bottom: 1px solid var(--color-text);

  padding-bottom: 2px;

}

/* social icons after "Contact" */

.nav__social {

  display: flex;

  align-items: center;

  gap: 1.5rem;                 /* 18px */

  margin-left: 0.25rem;
  margin-top: 10px;

}

.nav__social a {

  display: inline-flex;

  color: var(--color-text);

  text-decoration: none;

}

.nav__social svg{

  width: 1.1rem;

  height: 1.1rem;

}

.nav__social a:hover { color: var(--color-taupe); }

/* dropdowns */

.has-sub { position: relative; }

.has-sub::after {              /* invisible bridge so hover doesn't drop */

  content: "";

  position: absolute;

  left: 0; right: 0;

  top: 100%;

  height: 0.75rem;

}

.nav__sub {

  display: none;

  position: static;

  transform: none;

  min-width: 0;

  box-shadow: none;

  background: none;

  margin: 0;

  padding: 0 0 0.55rem;

}

.has-sub.expanded .nav__sub { display: block; }

/* little arrow so the section rows read as expandable (mobile only) */

.has-sub > a::after { content: " ▾"; font-size: 0.75em; }

.has-sub.expanded > a::after { content: " ▴"; }

.nav__sub a {

  display: block;

  padding: 0.45rem 1.25rem;

  white-space: nowrap;

  font-size: 0.9rem;

  text-align: center;          /* centered dropdown items */

}

.nav__sub a:hover { background: rgba(0, 0, 0, 0.05); }

.has-sub:hover .nav__sub,

.has-sub:focus-within .nav__sub { display: block; }

.nav__toggle {

  display: none;

  margin-left: auto;

  background: none;

  border: 1px solid var(--color-text);

  color: var(--color-text);

  font-size: 1.25rem;

  padding: 0.25rem 0.6rem;

  cursor: pointer;

}

/* visible keyboard focus */

.nav__toggle:focus-visible,

.nav__links a:focus-visible,

.nav__sub a:focus-visible {

  outline: 2px solid var(--color-taupe);

  outline-offset: 2px;

}

/* ============ HERO ============ */

/* Full-width hero photo with the Welcome image positioned over it. */

.hero {

  position: relative;          /* anchor point for the overlay image */

  width: 100%;

  overflow: hidden;

  margin: 0;

  padding: 0;

  line-height: 0;             /* remove inline image baseline spacing */

}

.hero > img {

  display: block;

  width: 100%;

  height: auto;                /* show the whole photo, don't crop */

}

.hero-quote {

  position: absolute;          /* pull the text off the flow */

  left: 30%;                   /* slide it in from the left  */

  bottom: 3%;                  /* anchor graphic near bottom of the hero */

  transform: translateY(45%); /* shift visible lettering down past transparent padding */

  margin: 0;

  z-index: 1;

  font-family: var(--font-hero-script);

  font-weight: 600;

  font-size: clamp(3rem, 9vw, 7.5rem);

  line-height: 0;

  color: var(--color-gold);

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);

  letter-spacing: 0.01em;

}

/* The Welcome graphic keeps its original size without inline HTML styles. */

.hero-quote img {

  display: block;

  width: 4.2em;

  max-width: 65vw;

  height: auto;

}

/* ============ INTRO ============ */

.intro {

  background: var(--color-taupe);

  color: #fff;

  padding: 4.5rem 0 5rem;

  text-align: center;

  margin-top: 0;

}

.intro__inner {

  max-width: 100%;

  margin: 0 auto;

  padding: 0 clamp(1rem, 4vw, 3rem);

}

.intro h1,

.intro__line {

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: clamp(1.4rem, 3.2vw, 2rem);

  line-height: 1.45;

}

.intro__line { margin-top: 1.25rem; }

.intro__text {

  text-align: left;            /* paragraph copy left-aligned; headings stay centered */

  margin-top: 2.75rem;

  font-size: 1.5rem;

  line-height: 1.85;

  color: rgba(255, 255, 255, 0.92);

}

.intro__text p + p { margin-top: 1.25rem; }

.intro__text em { color: #fff; }

.intro__signature {

  font-family: var(--font-script);

  font-size: 2.75rem;

  text-align: center;

  margin-top: 3rem;

  color: var(--color-cream);

}

.intro__divider {

  border: none;

  border-top: 4px solid rgba(255, 255, 255, 0.8);

  margin: 2.5rem auto 3rem;

}

/* "Link" word block */

.word { text-align: center; }

.word__term {

  font-family: var(--font-body);

  font-weight: 600;

  font-size: clamp(6.75rem, 12vw, 9rem);

}

.word__pos {

  font-style: italic;

  font-size: 1.1rem;

  font-weight: 400;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.8);

  margin-left: 0.75rem;

}

.word p {

  margin-top: 0.6rem;

  font-size: 1.4rem;

  color: rgba(255, 255, 255, 0.85);

}

/* ============ CONTACT ============ */

.contact {

  background: var(--color-taupe);

  color: #fff;

  text-align: center;

  padding: 4rem 0 5rem;

}

.contact__inner {

  max-width: var(--max-width);

  margin: 0 auto;

  padding: 0 var(--space);

}

.contact__portrait {

  width: 20rem;

  max-width: 100%;

  height: auto;

  margin: 0 auto 2.25rem;

  border: 4px solid rgba(255, 255, 255, 0.85);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

}

/* FIX: scoped to direct children so the intro paragraphs are styled,

   but <p class="form__group"> inside the form keeps its own 0.8rem size */

.contact__inner > p {

  font-size: 1.3rem;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.94);

  margin-bottom: 1.25rem;

}

/* form — centered as a block, fields left-aligned inside */

.contact__form {

  margin: 2.5rem auto 0;

  max-width: 30rem;

  text-align: left;

}

.form__group {

  font-size: 0.8rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.9);

  margin-bottom: 1rem;

}

.form__row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}

.field { margin-bottom: 1.1rem; }

.field__label {

  display: block;

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.85);

  margin-bottom: 0.4rem;

}

.field__label em { font-style: italic; opacity: 0.75; }

.field__input {

  width: 100%;

  font: inherit;

  font-size: 0.95rem;

  color: var(--color-text);

  background: #fff;

  border: 1px solid rgba(93, 76, 60, 0.35);

  border-radius: 2px;

  padding: 0.65rem 0.8rem;

}

.field__input:focus {

  outline: none;

  border-color: var(--color-taupe);

  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);

}

.field__input--textarea { min-height: 7rem; resize: vertical; }

.contact__submit {

  display: block;

  margin: 0.5rem auto 0;

  font: inherit;

  font-size: 0.8rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  padding: 0.6rem 1.5rem;

  background: #fff;

  color: var(--color-taupe);

  border: 1px solid #fff;

  border-radius: 2px;

  cursor: pointer;

  transition: background 0.2s ease, color 0.2s ease;

}

.contact__submit:hover {

  background: transparent;

  color: #fff;

}

/* ============ FOOTER ============ */

.site-footer {

  background:

    linear-gradient(rgba(214, 196, 158, 0.20), rgba(214, 196, 158, 0.20)),

    url("../img/background1.jpg") center / cover no-repeat;

  text-align: center;

  padding: 2.25rem var(--space) 1.25rem;

  flex-shrink: 0;

}

.footer-inner {

  max-width: var(--max-wide);

  margin: 0 auto;

}

.footer__contact p {

  font-family: var(--font-heading);

  font-size: 1.5rem;

  color: #3c3c3c;

  margin: 0.35rem 0;

  font-weight: 450;

}

/* socials, copyright, and moons all centered as a stack */

.footer__bottom {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  max-width: 54rem;

  margin: 1.3rem auto 0;

}

.footer__socials {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.footer__social {

  display: inline-flex;

  color: var(--color-text);

  text-decoration: none;

}

.footer__social svg {

  width: 1.5rem;

  height: auto;

}

.footer__social:hover { color: var(--color-taupe); }

.footer__copy {

  font-family: var(--font-heading);

  font-size: 1.5rem;

  color: #3c3c3c;

  margin: 0;

  font-weight: 450;

}

.footer__moons {

  display: block;

  height: 4rem;

  width: auto;

  margin-left: 1rem;

}

/* ============ MOBILE HEADER + MENU ============ */

@media (max-width: 767px) {

  /* header becomes the anchor point for the drop-down card */

  .site-header { position: relative; }

  .header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 0.5rem 1rem;

    padding: 1rem 1.25rem;

    min-height: 0;

  }

  .logo { order: 1; flex-shrink: 1; }

  .logo__mark { height: 9rem; max-width: 45vw; }

  /* the ☰ button */

  .nav__toggle {

    order: 2;

    margin-left: auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.3rem 0.7rem;

    cursor: pointer;

  }

  nav { order: 3; }

  .header-inner > nav { margin-left: 0; }

  /* closed: the menu is hidden */

  .nav__links { display: none; }

  /* open: card drops down under the button */

  .nav__links.open {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;                        /* kills the 2.75rem desktop gap */

    position: absolute;

    top: calc(100% + 0.25rem);

    right: 1.25rem;

    width: 19rem;

    max-width: calc(100% - 2.5rem);

    max-height: calc(100vh - 6rem);

    overflow-y: auto;

    margin: 0;

    padding: 0.5rem 1.1rem 0.75rem;

    background: var(--color-cream);

    border: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);

    z-index: 200;

  }

  .nav__links > li { width: 100%; }

  .nav__links > li + li { border-top: 1px solid rgba(0, 0, 0, 0.07); }

  /* centered menu text */

  .nav__links a {

    font-size: 1.125rem;

    line-height: 1.3;

    text-align: center;

  }

  .nav__links > li > a {

    display: block;

    padding: 0.3rem 0.15rem;

  }

  /* sub-pages listed under their parent, also centered */

  .nav__sub {

    display: none;

    position: static;

    transform: none;

    min-width: 0;

    box-shadow: none;

    background: none;

    margin: 0;

    padding: 0 0 0.55rem;

  }

  .has-sub.expanded .nav__sub { display: block; }

  .has-sub > a::after { content: " ▾"; font-size: 0.75em; }

  .has-sub.expanded > a::after { content: " ▴"; }

  .nav__sub a {

    display: block;

    padding: 0.25rem 0.15rem;

    font-size: 0.88rem;

    line-height: 1.4;

    color: var(--color-muted);

    text-align: center;

    white-space: normal;

  }

  /* social icons centered at the bottom of the card */

  .nav__social {

    justify-content: center;

    margin: 0;

    padding: 0.75rem 0 0.5rem;

  }

}

/* ============ QUOTE-LED INTRO (Philosophy page) ============

   Activate by adding the modifier class "intro--quote" to <section>.

   All rules are scoped to that class so the centered Home intro is untouched. */

.intro--quote .intro__inner {

  max-width: 100%;                       /* full-bleed, airy layout */

  padding: 0 clamp(1.5rem, 6vw, 4rem);

}

/* the Rumi quote: centered, big brush script */

.intro__quote {

  width: max-content;                    /* shrink to the quote so… */

  max-width: 100%;

  margin: 0 auto 1rem;                   /* …the byline aligns to its right edge */

  text-align: center;

}

.intro__quote p {

  font-family: var(--font-hero-script, "Dancing Script", cursive);

  font-weight: 500;

  font-size: clamp(2.5rem, 5.5vw, 4.25rem);

  line-height: 1.4;

  color: #fff;

}

/* attribution under the right end of the quote */

.intro__byline {

  display: block;

  margin-top: 1.25rem;

  font-family: var(--font-heading);

  font-style: normal;

  font-size: clamp(1.35rem, 2.2vw, 1.9rem);

  color: #fff;

  text-align: right;

}

/* long divider between the quote and the title */

.intro__topline {

  border: none;

  border-top: 4px solid rgba(255, 255, 255, 0.8);

  width: 100%;

  margin: 3rem auto 3.5rem;

}

/* page title in the thin signature script */

.intro--quote .intro__title {

  font-family: "Alegreya Sans", var(--font-heading), serif;

  font-weight: 400;

  font-style: italic;

  font-size: clamp(2.25rem, 4vw, 3.25rem);

  line-height: 1.3;

  color: #fff;

  text-align: center;

  margin-bottom: 2.75rem;

    opacity: 1;

}

/* Philosophy body copy: full-width and left-aligned */

.intro--quote .intro__text {

  max-width: none;

  width: 100%;

  margin: 0;

  text-align: left;

  font-size: 1.05rem;

  line-height: 1.6;

}

.intro--quote .intro__text p + p { margin-top: 0.75rem; }

/* sign-off */

.intro__closing {

  text-align: left;

  margin-top: 3rem;

  color: rgba(255, 255, 255, 0.92);

}

.intro--quote .intro__signature { margin-top: 0.5rem; }

/* Philosophy images: only replaces the Rumi quote and Julia signature text. */

.intro--quote .intro__quote-photo {

  display: block;

  width: min(100%, 48rem);

  height: auto;

  margin: 0 auto;

}

.intro--quote .intro__signature-photo {

  display: block;

  width: min(100%, 15rem);

  height: auto;

  margin: 0 auto;

  margin-left: 30rem;

}

/* =====================================================
   HEADER DROPDOWNS — ALL LINKS STAY INSIDE HEADER
   Remove bullets and right-align the links.
   The header grows naturally to contain open submenus.
   ===================================================== */
.nav__sub,
.nav__sub li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

@media (min-width: 768px) {
  /* Keep menu headings along the same top edge. */
  .nav__links {
    align-items: flex-start;
  }

  /* Keep submenus in the header rather than over the photo. */
  .nav__links > li.has-sub > .nav__sub {
    position: static;
    transform: none;
    width: max-content;
    min-width: 0;
    margin: 0;
    padding: 0.4rem 0 0.55rem;
    text-align: right;
  }

  /* Right-align the text in both dropdowns. */
  .nav__links > li.has-sub > .nav__sub li a {
    display: block;
    text-align: right;
    padding: 0.45rem 0;
    white-space: nowrap;
  }

  /* Nudge About (third main menu item) 10px right. */
  .nav__links > li.has-sub:nth-child(3) > .nav__sub {
    transform: translateX(10px);
  }

  /* Keep Equine Therapy (fourth main menu item) 45px right. */
  .nav__links > li.has-sub:nth-child(4) > .nav__sub {
    transform: translateX(40px);
  }
}