/* ==========================================================================
   Stallions Direct UK — Design tokens
   Bright / white theme (deliberately opposite of competitors' dark sites)
   ========================================================================== */

:root{
  /* --- colour --- */
  --white:        #ffffff;
  --paper:        #faf9f5;   /* near-white section background */
  --line:         #e7e3da;   /* hairline borders on white */
  --ink:          #22261f;   /* body text, near-black but warm */
  --ink-soft:     #565c4f;   /* secondary text */
  --green:        #1c4b34;   /* deep racing green — primary brand colour */
  --green-dark:   #123023;
  --green-tint:   #eaf1ec;   /* pale green card/section fill */
  --gold:         #a9803f;   /* pedigree gold — accents, highlights */
  --gold-tint:    #f6efe1;
  --red-flag:     #a6432e;   /* used sparingly: urgent / seasonal notices */

  /* --- type --- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace; /* pedigree/data figures */

  /* --- layout --- */
  --max-width: 1180px;
  --radius: 3px;
  --gap: 1.5rem;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--gold); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--green-dark);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size:2.6rem; font-weight:500; }
h2{ font-size:1.9rem; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
.lede{ font-size:1.15rem; color:var(--ink-soft); }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.5rem;
}

/* --- signature element: the "pedigree rule" ---------------------------
   a thin line with a small diamond marker, echoing the ruled lines and
   generation-markers of a breeding/pedigree certificate. Used under
   headings and as a section divider. */
.pedigree-rule{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:.4rem 0 1.75rem;
  color:var(--gold);
}
.pedigree-rule::before,
.pedigree-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.pedigree-rule::after{ display:none; }
.pedigree-rule .mark{
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  flex:none;
}
.section-eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  color:var(--gold);
}

/* --- header / nav --- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.5rem;
  max-width:var(--max-width);
  margin:0 auto;
  gap:1.5rem;
}
.logo{ flex: none; }
.logo img{ height:120px; width:auto; max-width:none; object-fit:contain; }
.main-nav ul{
  list-style:none; display:flex; gap:1.6rem;
  margin:0; padding:0; flex-wrap:wrap;
}
.main-nav a{
  color:var(--ink);
  font-size:.95rem;
  font-weight:500;
}
.main-nav a:hover{ color:var(--green); }

.nav-toggle{
  display:none;
  flex:none;
  flex-direction:column;
  width:36px; height:36px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  flex:none;
  display:block;
  width:22px; height:2px;
  background:var(--ink);
  margin:3px 0;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.header-actions{ display:flex; gap:.6rem; align-items:center; }
.btn{
  display:inline-block;
  padding:.65rem 1.3rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.9rem;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--green); color:var(--white); }
.btn-primary:hover{ background:var(--green-dark); color:var(--white); }
.btn-gold{ background:var(--gold); color:var(--white); }
.btn-gold:hover{ background:#8f6c31; color:var(--white); }
.btn-outline{ background:transparent; border-color:var(--green); color:var(--green); }
.btn-outline:hover{ background:var(--green-tint); }
.btn-small{ padding:.4rem .9rem; font-size:.8rem; }

/* mobile-only contact strip */
.contact-strip{
  background:var(--green-dark);
  color:var(--white);
  font-size:.85rem;
}
.contact-strip .container{
  display:flex; gap:1.5rem; justify-content:flex-end;
  padding-top:.45rem; padding-bottom:.45rem;
}
.contact-strip a{ color:var(--white); opacity:.9; }
.contact-strip a:hover{ opacity:1; color:var(--gold-tint); }
.phone-link{ display:inline-flex; align-items:center; gap:.4rem; }
.phone-link svg{ width:14px; height:14px; fill:currentColor; }
.social-icons{ display:flex; gap:.7rem; align-items:center; margin-left:.5rem; }
.social-icons a{ display:inline-flex; opacity:.9; }
.social-icons a:hover{ opacity:1; }
.social-icons svg{ width:16px; height:16px; fill:currentColor; }

/* --- holding page (temporary, while the full site is finished) --- */
.holding-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem;
  background:var(--paper);
}
.holding-page .logo img{ height:120px; width:auto; max-width:none; object-fit:contain; margin-bottom:2rem; }
.holding-page h1{ max-width:640px; }
.holding-page .hero-subhead{ margin-top:.5rem; }
.holding-page .hero-tagline{ max-width:520px; }
.holding-page .launching-note{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--gold);
  margin:1.8rem 0 1.4rem;
}
.holding-page .holding-contact{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.4rem; }
.holding-page .holding-contact a{ font-weight:600; }
.holding-page .social-icons{ margin-left:0; color:var(--green); }
.holding-page .social-icons svg{ width:20px; height:20px; }

/* --- hero --- */
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:4.5rem 0 3.5rem;
}
.hero .container{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:center;
}
.hero-copy .section-eyebrow{ margin-bottom:.75rem; display:block; }
.hero-subhead{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.2rem;
  color:var(--gold);
  margin:0 0 .35rem;
}
.hero-tagline{
  font-size:1.05rem;
  color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.hero-actions{ display:flex; gap:.9rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-media{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}

/* --- cards / grid --- */
.grid{ display:grid; gap:var(--gap); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.contact-grid{ grid-template-columns:1fr 1fr; }
.about-grid{ grid-template-columns:1fr 1fr; }
.stallion-detail-grid{ grid-template-columns:2fr 1fr; }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.card:hover{ box-shadow:0 10px 24px rgba(28,75,52,.08); transform:translateY(-2px); }
.card .card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--green-tint); }
.card .card-media img{ width:100%; height:100%; object-fit:cover; }
.card .card-body{ padding:1.1rem 1.2rem 1.3rem; }
.card h3{ margin-bottom:.25rem; font-size:1.15rem; }
.card .tag-list{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0 .7rem; }
.tag{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:var(--green-tint);
  color:var(--green-dark);
  padding:.2rem .5rem;
  border-radius:2px;
}
.tag.gold{ background:var(--gold-tint); color:#7a5a26; }
.card .meta{ color:var(--ink-soft); font-size:.88rem; margin-bottom:.6rem; }

/* --- section blocks --- */
.section{ padding:3.5rem 0; }
.section-alt{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:2rem; }

/* --- trust strip --- */
.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  padding:2.2rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-item{ text-align:center; }
.trust-item .figure{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--green);
}
.trust-item .label{ color:var(--ink-soft); font-size:.85rem; }

/* --- forms --- */
form.stacked{ max-width:680px; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; }
.field .hint{ color:var(--ink-soft); font-size:.8rem; margin-top:.3rem; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], select, textarea{
  width:100%;
  padding:.65rem .8rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font:inherit;
  background:var(--white);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:var(--gold);
}
textarea{ min-height:120px; resize:vertical; }
fieldset{ border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem; margin:0 0 1.1rem; }
legend{ font-weight:600; padding:0 .4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkbox-row{ display:flex; align-items:center; gap:.5rem; }
.checkbox-row input{ width:auto; }

.alert{ padding:.9rem 1.1rem; border-radius:var(--radius); margin-bottom:1.3rem; font-size:.92rem; }
.alert-success{ background:var(--green-tint); color:var(--green-dark); border:1px solid #c6dccd; }
.alert-error{ background:#fbeae6; color:var(--red-flag); border:1px solid #f0c9bf; }

/* --- filter bar (stallion directory) --- */
.filter-bar{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.2rem;
  margin-bottom:2rem;
}
.filter-bar form{
  display:grid;
  grid-template-columns:repeat(5,1fr) auto;
  gap:.8rem;
  align-items:end;
}
.filter-bar label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); display:block; margin-bottom:.3rem; }

/* --- individual stallion page --- */
.stallion-hero{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }

.stallion-gallery-main{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  margin-bottom:.6rem;
}
.stallion-gallery-main img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.9);
  color:var(--green-dark);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.gallery-nav:hover{ background:var(--white); color:var(--gold); }
.gallery-nav.prev{ left:.6rem; }
.gallery-nav.next{ right:.6rem; }

.stallion-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.8rem;
}
.stallion-thumb{
  width:64px; height:64px;
  object-fit:cover;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  opacity:.75;
}
.stallion-thumb:hover{ opacity:1; }
.stallion-thumb.active{
  border-color:var(--gold);
  opacity:1;
}

.video-embed{
  position:relative;
  aspect-ratio:16/9;
  margin-bottom:1rem;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }

.spec-table{ width:100%; border-collapse:collapse; margin-bottom:1.5rem; }
.spec-table th, .spec-table td{
  text-align:left; padding:.55rem .3rem; border-bottom:1px solid var(--line); font-size:.92rem;
}
.spec-table th{ width:38%; color:var(--ink-soft); font-weight:600; }
.price-box{
  background:var(--green-tint);
  border:1px solid #c6dccd;
  border-radius:var(--radius);
  padding:1.2rem;
  margin-bottom:1.4rem;
}
.price-box .amount{ font-family:var(--font-display); font-size:1.8rem; color:var(--green-dark); }

.bloodline-table{
  border-collapse:collapse;
  margin-bottom:1.5rem;
  font-size:.92rem;
}
.bloodline-table td{
  border:1px solid var(--line);
  padding:.6rem .8rem;
  vertical-align:middle;
  color:var(--ink);
}
.bloodline-table td:empty::after{ content:"\2014"; color:var(--ink-soft); } /* em dash for unknown names */
.bloodline-table td.ped-top{
  font-weight:600;
  color:var(--green-dark);
  background:var(--green-tint);
}
.bloodline-table td.dam{
  font-style:italic;
  color:#7a5a26;
}
.bloodline-table td.dam.ped-top{
  background:var(--gold-tint);
  color:#7a5a26;
}

/* --- footer --- */
.site-footer{
  background:var(--green-dark);
  color:#dce6de;
  padding:3rem 0 1.5rem;
  margin-top:3rem;
}
.site-footer a{ color:#dce6de; }
.site-footer a:hover{ color:var(--white); }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:2rem; }
.footer-grid h4{ color:var(--white); font-size:.95rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.4rem; font-size:.9rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:1.2rem;
  font-size:.8rem;
  display:flex;
  justify-content:space-between;
  color:#a9bcae;
}

/* --- admin --- */
body.admin{ background:var(--paper); }
.admin-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.admin-sidebar{ background:var(--green-dark); color:#dce6de; padding:1.5rem 1.2rem; }
.admin-sidebar .logo-mark{ color:var(--white); font-family:var(--font-display); font-size:1.25rem; margin-bottom:2rem; display:block; }
.admin-sidebar ul{ list-style:none; margin:0; padding:0; }
.admin-sidebar li{ margin-bottom:.3rem; }
.admin-sidebar a{ color:#cfe0d3; display:block; padding:.5rem .6rem; border-radius:var(--radius); font-size:.92rem; }
.admin-sidebar a:hover, .admin-sidebar a.active{ background:rgba(255,255,255,.08); color:var(--white); }
.admin-main{ padding:2rem 2.5rem; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.8rem; }
table.admin-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); }
table.admin-table th, table.admin-table td{ padding:.7rem .9rem; border-bottom:1px solid var(--line); font-size:.9rem; text-align:left; }
table.admin-table th{ background:var(--paper); font-weight:600; }
table.admin-table tr:hover{ background:#fbfaf6; }
.admin-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }

/* Plain grid of pedigree entry boxes, positioned to match a standard
   3-generation pedigree chart layout — no labels, just boxes in place,
   so existing pedigree data can be pasted in box by box. */
.bloodline-input-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-auto-rows:3.2rem;
  gap:6px;
  max-width:900px;
}
.bloodline-input-grid input{
  width:100%;
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.5rem .7rem;
  font:inherit;
  background:var(--white);
  color:var(--ink);
}
.bloodline-input-grid input:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:var(--gold);
}
@media (max-width:700px){
  .bloodline-input-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
  .bloodline-input-grid input{
    grid-column:1 !important;
    grid-row:auto !important;
    height:2.6rem;
  }
}
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper); }
.login-box{ width:360px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; }

/* --- responsive --- */
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .stallion-hero{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .stallion-detail-grid{ grid-template-columns:1fr; }
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .filter-bar form{ grid-template-columns:1fr 1fr; }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ display:none; }

  .header-bar{ flex-wrap:wrap; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .header-actions{ order:10; }
  .main-nav{
    display:none;
    width:100%;
    order:5;
    border-top:1px solid var(--line);
    margin-top:1rem;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; padding-top:.5rem; }
  .main-nav li{ width:100%; }
  .main-nav a{
    display:block;
    padding:.85rem .2rem;
    border-bottom:1px solid var(--line);
  }
}
@media (max-width: 560px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  h1{ font-size:2rem; }
  .field-row{ grid-template-columns:1fr; }
  .header-bar{ flex-wrap:wrap; }
  .logo img{ height:105px; }
  .header-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .header-actions .btn{ width:100%; text-align:center; }
}