/*
Theme Name: Big Drop Ranch
Theme URI: https://bigdropranch.com
Author: Built for Big Drop Ranch
Description: Version 2 — the split-row build. Working-ranch theme for Big Drop Ranch, Hondo, Texas. Cattle, hunting, lodging and water, built on alternating square-photograph split rows. Every photograph and every line of text is editable from the WordPress admin. No plugins required.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bigdrop
Tags: custom-menu, custom-logo, featured-images, editor-style, translation-ready
*/

/* =====================================================================
   BIG DROP RANCH
   Layout after paulnelsonfarm.com/the-experience: a two-column grid with
   no gap, a square photograph in one half, headline and a short paragraph
   in the other, rows alternating side and stacking flush so the squares
   read as one checkerboard down the page.
   ===================================================================== */
:root{
  --paper:#F0EEDE;        /* the ground, everywhere */
  --paper2:#E7E3CE;
  --card:#F7F5E9;
  --ink:#171813;
  --ink2:#20211A;
  --brick:#7E2017;        /* the one accent */
  --brick-lt:#B4574A;
  --gold:#A8823C;
  --rule:#D3CDB4;
  --body:#2A2B24;
  --meta:#5C5D4E;
  --onink:#E8E4CE;
  --onink-dim:#B3B0A0;

  --head:"Alegreya","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --cmax:1263px;
  --cpad:clamp(20px,5.5vw,77px);
  --s5:clamp(18px,3vw,40px);
  --e:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:17px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--cmax);margin:0 auto;padding-inline:var(--cpad)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:1.06}
h1{font-size:clamp(30px,4.4vw,51px);letter-spacing:-.005em;color:var(--brick)}
h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.005em;color:var(--ink)}
h3{font-size:clamp(21px,2.2vw,27px);letter-spacing:0;color:var(--ink)}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--meta)}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.62;color:var(--body)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;
  font-weight:700;letter-spacing:.01em;padding:15px 26px;border:2px solid transparent;
  transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e);cursor:pointer}
.btn:before{content:"›";font-size:17px;line-height:1;transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark:hover{background:var(--brick);border-color:var(--brick)}
.btn.line{border-color:var(--ink);color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:var(--brick);border-color:var(--brick);color:var(--paper)}
.btn.ghost{border-color:rgba(232,228,206,.5);color:var(--onink)}
.btn.ghost:hover{background:var(--onink);color:var(--ink);border-color:var(--onink)}

/* ---------- the ranch brand ----------
   Traced from the supplied artwork to 20 nodes, so it stays sharp at any
   size and takes its colour from whatever it sits on. The lockup follows
   the ranch's own printed arrangement: wordmark stacked, brand to its
   right, mark taller than the type block. */
.mark{display:block;flex:none;line-height:0}
.mark svg{width:100%;height:auto;display:block}

.lock{margin-right:auto;display:flex;align-items:center;gap:clamp(10px,1.1vw,16px)}
.lock .lw{line-height:1}
.lock b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.3vw,29px);letter-spacing:.03em;color:var(--ink)}
.lock i{display:block;font-style:normal;font-family:var(--sans);font-size:clamp(9.5px,.85vw,11px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-top:6px}
.lock .mark{width:clamp(31px,3.2vw,42px);color:var(--ink)}

/* the crest that crowns the home page */
.crest{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(22px,2.6vw,34px)}
.crest .cw{text-align:right;line-height:1}
.crest .cw b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:clamp(27px,3.7vw,46px);letter-spacing:.045em;color:var(--ink)}
.crest .cw i{display:block;font-style:normal;font-size:clamp(10px,1vw,12px);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-top:10px}
.crest .mark{width:clamp(52px,6.2vw,84px);color:var(--brick)}
@media(max-width:520px){
  .crest{gap:12px}
  .crest .cw b{letter-spacing:.02em}
}
footer .mark{width:34px;color:var(--onink);margin-bottom:12px}
.sheet .top .mark{width:30px;color:var(--ink);margin-right:11px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:80;background:var(--paper);transition:box-shadow .3s var(--e)}
header .bar,.lock b,.lock i,.lock .mark{transition:font-size .3s var(--e),width .3s var(--e),padding .3s var(--e),opacity .25s var(--e)}
header.stuck .bar{padding-block:10px}
header.stuck .lock b{font-size:clamp(17px,1.7vw,21px)}
header.stuck .lock i{opacity:0;height:0;margin-top:0;overflow:hidden}
header.stuck .lock .mark{width:clamp(26px,2.4vw,31px)}
header.stuck{box-shadow:0 1px 0 var(--rule),0 10px 26px -22px rgba(23,24,19,.5)}
header .bar{display:flex;align-items:center;gap:22px;max-width:var(--cmax);margin:0 auto;
  padding:16px var(--cpad)}
nav.main{display:flex;gap:6px}
nav.main a{font-size:15.5px;font-weight:500;padding:9px 14px;border-radius:2px;
  transition:background .2s var(--e),color .2s var(--e)}
nav.main a:hover{background:var(--paper2)}
nav.main a.on{background:var(--paper2);color:var(--brick);font-weight:600}
.tel{font-size:15px;font-weight:600;white-space:nowrap}
@media(max-width:1100px){nav.main,.tel{display:none}}

/* mobile menu */
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink);background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.burger span{display:block;width:19px;height:2px;background:var(--ink);transition:.25s var(--e)}
body.menu .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu .burger span:nth-child(2){opacity:0}
body.menu .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:90;background:var(--paper);padding:22px var(--cpad) 44px;
  overflow-y:auto;display:none}
body.menu{overflow:hidden}
body.menu .sheet{display:block}
.sheet .top{display:flex;align-items:center;margin-bottom:26px}
.sheet .close{margin-left:auto;width:46px;height:46px;border:2px solid var(--ink);
  background:transparent;cursor:pointer;font-size:19px}
.sheet ol{list-style:none;border-top:1px solid var(--rule)}
.sheet li{border-bottom:1px solid var(--rule)}
.sheet li a{display:flex;align-items:baseline;gap:15px;padding:18px 2px;
  font-family:var(--head);text-transform:uppercase;font-size:25px;color:var(--ink)}
.sheet li a em{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--brick);flex:none}
.sheet .call{margin-top:28px;font-size:15px;line-height:2}
.sheet .call b{display:block;font-family:var(--head);text-transform:uppercase;font-size:15px;
  letter-spacing:.06em;color:var(--meta);margin-top:16px}
@media(max-width:1100px){.burger{display:flex}}

/* ---------- page opener ---------- */
.opener{text-align:center;padding:clamp(46px,7vw,92px) 0 clamp(34px,4.6vw,56px)}
.opener .eyebrow{margin-bottom:20px}
.opener h1{margin:0 auto;max-width:24ch}
.opener .lede{margin:22px auto 0;max-width:60ch;color:var(--meta)}
.opener .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* full-bleed band under the opener */
.bleed{width:100%;aspect-ratio:2.25;overflow:hidden;background:var(--ink2)}
@media(max-width:700px){.bleed{aspect-ratio:3/2}}

/* ---------- THE SPLIT ROW ---------- */
.split{padding-block:clamp(30px,4vw,54px)}
.row .grid{display:grid;grid-template-columns:1fr;align-items:center}
.shot{position:relative;overflow:hidden;background:var(--ink2);aspect-ratio:1}
.shot img{transition:transform 1.1s var(--e)}
.content{padding-block:clamp(28px,5vw,44px);padding-inline:var(--cpad)}
.content .kicker{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brick);display:block;margin-bottom:14px}
.content h2 .arw{color:var(--brick);font-family:var(--sans);font-weight:400;
  font-size:.62em;margin-left:.28em;vertical-align:.06em}
.content p{margin-top:16px;max-width:46ch;color:var(--body)}
.content .more{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:14.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brick);
  border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .25s var(--e)}
.content .more:hover{border-bottom-color:var(--brick)}
a.row-link{display:block;color:inherit}
a.row-link:hover .shot img{transform:scale(1.028)}

@media(min-width:992px){
  .row .grid{grid-template-columns:repeat(2,1fr);max-width:var(--cmax);margin-inline:auto;
    padding-inline:var(--cpad)}
  .shot{max-width:705px;width:100%}
  .content{padding-inline:0;max-width:calc(46ch + var(--s5))}
  .row.img-right .grid{grid-template-areas:"content image"}
  .row.img-right .content{grid-area:content;padding-right:var(--s5)}
  .row.img-right .shot{grid-area:image;border-radius:0 3px 3px 0}
  .row.img-left .grid{grid-template-areas:"image content"}
  .row.img-left .content{grid-area:content;margin-left:auto;padding-left:var(--s5)}
  .row.img-left .shot{grid-area:image;border-radius:3px 0 0 3px}
}
/* Below the split, every other row inverts. Straight from Paul Nelson, and
   it is the single detail that keeps a long stack of squares from reading
   as one undifferentiated column on a phone. */
@media(max-width:991px){
  .row.img-left{background:var(--ink);color:var(--onink)}
  .row.img-left h2{color:var(--onink)}
  .row.img-left p{color:var(--onink-dim)}
  .row.img-left .kicker,.row.img-left .content h2 .arw{color:var(--gold)}
  .row.img-left .more{color:var(--gold)}
  .row.img-left .more:hover{border-bottom-color:var(--gold)}
}

/* ---------- prose block ---------- */
.prose{padding-block:clamp(40px,5.5vw,74px)}
.prose .measure{max-width:74ch}
.prose h2{margin-bottom:20px}
.prose p+p{margin-top:16px}
.prose .quiet{color:var(--meta)}

/* ---------- facts rule ---------- */
.facts{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.facts div{padding:24px clamp(12px,1.8vw,24px)}
.facts div:nth-child(n+3){border-top:1px solid var(--rule)}
.facts div:nth-child(even){border-left:1px solid var(--rule)}
@media(min-width:760px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts div{padding:26px clamp(14px,2vw,26px)}
  .facts div:nth-child(n+3){border-top:0}
  .facts div+div{border-left:1px solid var(--rule)}
}
.facts b{display:block;font-family:var(--head);text-transform:uppercase;font-weight:400;
  font-size:clamp(21px,2.1vw,28px);color:var(--ink);line-height:1.04}
.facts small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--meta);margin-top:9px}

/* ---------- gallery ---------- */
.gal{padding-block:clamp(34px,4.5vw,60px)}
.gal .head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.gal .head p{font-size:14.5px;color:var(--meta);margin-left:auto}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:6px}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 clamp(230px,29vw,352px);scroll-snap-align:start}
.strip .ar{aspect-ratio:1;overflow:hidden;background:var(--ink2);border-radius:3px}
.strip figcaption{font-size:13.5px;color:var(--meta);margin-top:9px}
.galnav{display:flex;gap:8px;margin-top:14px}
.galbtn{width:44px;height:44px;border:2px solid var(--ink);background:transparent;cursor:pointer;
  font-size:16px;transition:.2s var(--e)}
.galbtn:hover{background:var(--ink);color:var(--paper)}

/* ---------- contact cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;
  background:var(--rule);border:1px solid var(--rule)}
.cards .c{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.cards h3{font-size:19px;margin-bottom:6px}
.cards .who{font-size:14px;color:var(--meta);margin-bottom:14px}
.cards a.l{display:block;font-size:16px;font-weight:600;color:var(--brick);margin-top:5px;overflow-wrap:anywhere}

/* ---------- dark call to action ---------- */
.cta{background:var(--ink);color:var(--onink);text-align:center;
  padding-block:clamp(50px,7vw,96px)}
.cta h2{color:#E7DFB4}
.cta p{margin:18px auto 0;max-width:52ch;color:var(--onink-dim)}
.cta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- footer ---------- */
footer{background:var(--ink2);color:var(--onink-dim);padding-block:clamp(40px,5vw,68px)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:26px}
@media(max-width:820px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer h6{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--onink);margin-bottom:12px}
footer a,footer p{display:block;font-size:15px;margin-bottom:6px;overflow-wrap:anywhere}
footer a:hover{color:var(--onink)}
footer .fmark b{display:block;font-family:var(--head);text-transform:uppercase;font-size:21px;
  letter-spacing:.02em;color:var(--onink)}
footer .fmark i{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-top:6px}
.fbot{margin-top:34px;padding-top:18px;border-top:1px solid rgba(232,228,206,.16);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}
  .shot img,a.row-link:hover .shot img{transition:none;transform:none}}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px}

/* (the prototype's client-side routing rules are deliberately not shipped:
   WordPress puts a `page` class on the body of every Page, and hiding
   `.page` would blank the whole site.) */

/* =====================================================================
   WordPress specifics
   ===================================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);
  color:var(--paper);padding:12px 18px;font-weight:700}
.skip-link:focus{left:8px;top:8px}
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
.alignwide{max-width:none}
.wp-caption{max-width:100%}

/* the intro copy comes out of the page editor, so give it real defaults */
.prose .measure > *+*{margin-top:16px}
.prose .measure h2,.prose .measure h3{margin-top:28px}
.prose .measure ul,.prose .measure ol{padding-left:1.2em}
.prose .measure li+li{margin-top:6px}
.prose .measure a{color:var(--brick);border-bottom:1px solid rgba(126,32,23,.35)}
.prose .measure a:hover{border-bottom-color:var(--brick)}
.prose .measure strong{font-weight:700}
.prose .measure img{width:auto;max-width:100%;height:auto;margin-block:22px}
.prose .measure blockquote{border-left:3px solid var(--brick);padding-left:20px;
  font-family:var(--head);font-size:20px;line-height:1.36;color:var(--ink)}

/* a page with no rows yet should still look deliberate rather than broken */
.empty-note{border:1px dashed var(--rule);padding:26px;color:var(--meta);font-size:15.5px}


/* =====================================================================
   WordPress menu markup
   wp_nav_menu wraps items in <li>, which the prototype did not have, and
   the mobile sheet numbers its items — done here with a counter so the
   ranch never has to type "01" into a menu label.
   ===================================================================== */
nav.main ul,nav.main li{list-style:none;margin:0;padding:0}
nav.main{display:flex;gap:6px;align-items:center}
nav.main li{display:block}
nav.main .current-menu-item > a,
nav.main .current_page_item > a{background:var(--paper2);color:var(--brick);font-weight:600}

.sheet ol.sheet-menu{list-style:none;counter-reset:bdrnav;border-top:1px solid var(--rule);margin:0;padding:0}
.sheet ol.sheet-menu li{border-bottom:1px solid var(--rule);counter-increment:bdrnav}
.sheet ol.sheet-menu li a{display:flex;align-items:baseline;gap:15px;padding:18px 2px;
  font-family:var(--head);text-transform:uppercase;font-size:25px;color:var(--ink)}
.sheet ol.sheet-menu li a:before{content:counter(bdrnav,decimal-leading-zero);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--brick);flex:none}

footer ul,footer li{list-style:none;margin:0;padding:0}
footer li a{display:block;font-size:15px;margin-bottom:6px}

/* the header lockup needs to survive a long ranch name on a small phone */
@media(max-width:420px){
  .lock b{font-size:17px}
  .lock i{letter-spacing:.12em}
  .lock .mark{width:26px}
}


/* =====================================================================
   Responsive overrides, last on purpose.
   The WordPress menu block above re-declares nav.main, so these have to
   come after it or the desktop menu stays visible on a phone and shoves
   the header off the side of the screen.
   ===================================================================== */
@media(max-width:1100px){
  nav.main,.tel{display:none!important}
  .burger{display:flex}
}
@media(min-width:1101px){
  .burger{display:none}
}


/* =====================================================================
   Instagram
   A flush grid of squares, which is the same move the split rows make —
   no gaps, so the tiles read as one block rather than a row of cards.
   Six across on a desktop, three on a phone.
   ===================================================================== */
.social{padding-block:clamp(34px,4.6vw,64px) clamp(30px,4vw,52px)}
.sochead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px)}
.sochead h2{font-size:clamp(24px,2.9vw,34px)}
.sochead .handle{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.06em;
  color:var(--brick);border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .25s var(--e)}
.sochead .handle:hover{border-bottom-color:var(--brick)}

.socgrid{display:grid;grid-template-columns:repeat(6,1fr);width:100%}
.socgrid .tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--ink2)}
.socgrid .tile img{transition:transform .9s var(--e),opacity .3s var(--e)}
.socgrid a.tile:hover img{transform:scale(1.05);opacity:.86}
/* a hairline so adjacent photographs never merge into each other */
.socgrid .tile:after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset -1px -1px 0 rgba(240,238,222,.5)}
@media(max-width:900px){.socgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.socgrid{grid-template-columns:repeat(3,1fr)}}

.socfoot{margin-top:clamp(20px,2.4vw,30px)}

/* a live plugin feed drops in here; keep it inside the page gutter */
.soclive{max-width:var(--cmax);margin-inline:auto;padding-inline:var(--cpad)}
.soclive img{height:auto}