/*
Theme Name:  Taran
Theme URI:   https://tantarantan.com/
Author:      System X Designs
Description: Custom theme for Taran Duli Beach — hostel, beach club and retreat in El Nido, Palawan. A 1:1 port of the Figma homepage (file v8zrtoI8rVxCdBFsTAYLja, frame "Taran Homepage"). Classic theme, no page builder, no plugin dependencies.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taran
Tags:        one-column, custom-menu, custom-logo, editor-style
*/

/* ============================================================
   TARAN — Homepage
   All values extracted from Figma file v8zrtoI8rVxCdBFsTAYLja
   Frame "Taran Homepage" · 1440 × 6299
   Rows map 1:1 onto the Figma div.page children.
   ============================================================ */


/* ------------------------------------------------------------
   00 — TOKENS  (exact Figma values)
   ------------------------------------------------------------ */
:root{

  /* --- Colour --- */
  --c-black:       #050505;  /* header, hero bg, footer            */
  --c-ink:         #111111;  /* primary text                       */
  --c-cream:       #F4F4F1;  /* page bg, marquee, pods card        */
  --c-teal-hero:   #0B5F60;  /* hero video block                   */
  --c-teal-card:   #07586B;  /* Explore Duli card                  */
  --c-rose:        #D6AAA2;  /* strips, header buttons, rose cards */
  --c-pink:        #F6ACBB;  /* logo, footer links, Contact Us     */
  --c-brown:       #3A2D18;  /* architecture band                  */
  --c-grey:        #D8D8D8;  /* photo placeholders, grey pill      */
  --c-grey-70:     #555555;  /* photo placeholder labels           */
  --c-grey-80:     #333333;  /* pattern strip labels               */
  --c-white:       #FFFFFF;

  /* --- Type --- */
  --f-sans:  "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Xanh Mono", "Courier New", Georgia, serif;

  /* --- Layout --- */
  --frame:        1440px;
  --container:    1137px;   /* side margin = (1440-1137)/2 = 151.5 */
  --page-inset:   151.5px;
  --hdr-inset:    51.6px;   /* logo + IG icon sit outside container */
  --card-pad-x:   72px;
  --card-w:       576px;    /* 720 - 72*2                          */
}


/* ------------------------------------------------------------
   00b — RESET / BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-cream);          /* page fill #F4F4F1 */
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:15px;
  line-height:1.6;                    /* 24 / 15 */
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2{ margin:0; font-weight:400; }
address{ font-style:normal; }
figure{ margin:0; }

.row{ width:100%; }
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}


/* ------------------------------------------------------------
   00c — SHARED TEXT STYLES  (Figma text styles, exact)
   ------------------------------------------------------------ */

/* Inter 700 · 11 / 13.31 · +1.32px · UPPER */
.eyebrow{
  font-size:11px;
  font-weight:700;
  line-height:1.21;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-ink);
  margin:0 0 24px;
}
.eyebrow--wide{ margin-bottom:32px; }   /* EXPLORE DULI block = 45px tall */
.eyebrow--light{ color:var(--c-white); }

/* Xanh Mono Italic 400 · 34 / 38 · -1.02px */
.serif-title{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  font-size:34px;
  line-height:1.1176;
  letter-spacing:-.03em;
  margin:0 0 28px;
}

/* Inter 400 · 15 / 24 */
.body-copy{ font-size:15px; line-height:1.6; }
.body-copy p + p{ margin-top:24px; }    /* blank-line gap in Figma */

/* Inter 700 · 12 / 15.6 · +0.6px · UPPER */
.link{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:opacity .2s ease;
}
.link:hover{ opacity:.6; }

/* Inter 600 · 14 / 22.4 — pill button, r999, pad 10/18 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--c-rose);
  color:var(--c-ink);
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  white-space:nowrap;
  transition:filter .2s ease;
}
.btn:hover{ filter:brightness(.94); }
.btn--pink{ background:var(--c-pink); }

/* Manual line breaks from Figma — dropped below desktop */
.lb{ display:inline; }

/* Visually hidden but available to screen readers / SEO */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ------------------------------------------------------------
   00d — SHARED BLOCKS
   ------------------------------------------------------------ */

/* --- media fill: any <video>/<img> that should cover its slot --- */
.media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* div.video-placeholder — 720 wide, #D8D8D8, label Inter 700 22/26.62 +1.76 */
.video-placeholder{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-grey);
  padding:40px;
}
/* once a real video is in the slot the placeholder label is hidden */
.video-placeholder:has(.media) figcaption{ display:none; }
.video-placeholder figcaption{
  font-size:22px;
  font-weight:700;
  line-height:1.21;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-grey-70);
  text-align:center;
}

/* div.content-card — 720 wide, pad 96/72, contents vertically CENTERED */
.content-card{
  display:flex;
  flex-direction:column;
  justify-content:center;          /* primaryAxisAlignItems: CENTER */
  padding:96px var(--card-pad-x);
}
.card--tall{ padding-block:106px; }   /* section#schedule cards */
.card__inner{ width:100%; max-width:var(--card-w); }

.card--teal{  background:var(--c-teal-card); color:var(--c-white); }
.card--teal .eyebrow{ color:var(--c-white); }
.card--rose{  background:var(--c-rose); }
.card--cream{ background:var(--c-cream); }
#row-08-beach-club .serif-title,
#row-08-beach-club .body-copy,
#row-08-beach-club .link{ color:var(--c-black); }

/* div.shape-placeholder — Figma placeholder is a 280 × 90 pill.
   Used only where no real asset exists yet (row 07, Explore Duli). */
.shape{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:280px;
  height:90px;
  max-width:100%;
  border-radius:999px;
  margin:8px 0 48px;
}
.shape:has(.media) span{ display:none; }

/* Delivered pattern-shape animations are 2500 × 1406 compositions with the
   card colour baked in — so no pill mask, no background, full aspect ratio. */
.shape--asset{
  width:100%;
  max-width:var(--card-w);
  height:auto;
  aspect-ratio:2500 / 1406;
  border-radius:0;
  background:none;
  overflow:visible;
}
.shape--asset .media{ object-fit:contain; }
.shape span{
  font-size:11px;
  font-weight:700;
  line-height:1.21;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.shape--light    { background:rgba(255,255,255,.45); }
.shape--light-42 { background:rgba(255,255,255,.42); }
.shape--grey     { background:var(--c-grey); }
.card--teal  .shape span{ color:var(--c-white); }
.card--rose  .shape span{ color:var(--c-ink); }
.card--cream .shape span{ color:var(--c-ink); }
#row-08-beach-club .shape span{ color:var(--c-black); }

/* a.link:margin — 32px above the CTA */
.card__inner .link{ margin-top:32px; }


/* ============================================================
   ROW 01 — header.header      1440 × 88 · #050505
   ============================================================ */
.row--header{
  background:var(--c-black);
  height:88px;
  display:flex;
  align-items:center;
  padding-inline:var(--hdr-inset);
}
.hdr__logo{ flex:0 0 auto; }
.hdr__logo img{ width:150px; height:37px; }

.hdr__nav{
  margin-left:auto;
  margin-right:50px;          /* nav right edge → container edge, 50 to icon */
  display:flex;
  align-items:center;
  gap:30px;                   /* Figma itemSpacing, uniform */
}
.hdr__nav > a{
  font-size:13px;
  font-weight:500;
  line-height:1.21;
  color:var(--c-white);
  transition:opacity .2s ease;
}
.hdr__nav > a:hover{ opacity:.65; }
.hdr__nav > a.btn{ height:40px; color:var(--c-ink); }
.hdr__nav > a.btn:hover{ opacity:1; }

.hdr__social{ flex:0 0 auto; }
.hdr__social img{ width:50px; height:50px; }
.nav__burger{ display:none; }


/* ============================================================
   ROW 02 — section.hero       1440 × 808 · #050505 · pad-bottom 48
   ============================================================ */
.row--hero{
  background:var(--c-black);
  padding:0 var(--page-inset) 48px;
}
.hero__video{
  background:var(--c-teal-hero);
  aspect-ratio:1137 / 760;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.hero__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Inter 800 · 72 / 64.8 · -3.6px */
.hero__title{
  position:relative;
  font-size:72px;
  font-weight:800;
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--c-white);
  text-align:center;
}


/* ============================================================
   ROW 03 — section#about      1440 × 336 · pad 118.89 / 120
   text block 650 wide, Inter 400 · 22 / 31.9
   ============================================================ */
.row--about{ padding:118.89px var(--page-inset) 120px; }
.intro{
  max-width:650px;
  margin-inline:auto;
  font-size:22px;
  line-height:1.45;
  text-align:center;
}


/* ============================================================
   ROW 04 — div.marquee-placeholder  1440 × 120 · #F4F4F1
   Inter 800 · 72 / 87.14 · -2.88px
   ============================================================ */
.row--marquee{
  position:relative;
  background:var(--c-cream);
  height:120px;
  overflow:hidden;
}
/* source loop is 1092 × 100 and already scrolls internally */
.row--marquee .media{ object-fit:cover; object-position:center; }


/* ============================================================
   ROW 05 — section.section    1440 × 645 · pad 120/120
   3 × 326 columns, 80 gap, article gap 24
   ============================================================ */
.row--pillars{ padding-block:120px; }
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:80px;
  align-items:start;
}
.pillar .eyebrow{ margin-bottom:24px; }
.pillar .serif-title{ margin-bottom:24px; }
.pillar .body-copy{ margin-bottom:24px; }


/* ============================================================
   ROW 06 & 12 — div.pattern-strip  1440 × 140 · #D6AAA2
   Inter 700 · 16 / 19.36 · +1.28px
   ============================================================ */
.row--strip{
  position:relative;
  overflow:hidden;
  background:var(--c-rose);
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:24px;
}
.row--strip:has(.media) .strip__label{ display:none; }
.strip__label{
  font-size:16px;
  font-weight:700;
  line-height:1.21;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-grey-80);
  text-align:center;
}


/* ============================================================
   ROWS 07 · 08 · 10 · 11 — split sections, exact 50 / 50
   ============================================================ */
.row--split{
  display:grid;
  grid-template-columns:1fr 1fr;
}
#row-07-explore,
#row-08-beach-club{ min-height:679px; }
#row-10-wellness,
#row-11-pods{ min-height:787px; }


/* ============================================================
   ROW 09 — section.architecture  1440 × 668 · #3A2D18
   pad-top 212.6 · eyebrow → title 27 · title → body 28
   ============================================================ */
.row--architecture{
  position:relative;
  overflow:hidden;
  background:var(--c-brown);
  color:var(--c-white);
  padding:212.6px var(--page-inset) 252.97px;
  text-align:center;
}
/* Black overlay over the no-overlay source video, kept light enough that the
   bamboo stays visible behind readable white copy. Dial --arch-tint only. */
.row--architecture{ --arch-tint:.65; }
.row--architecture::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:var(--arch-tint);
  z-index:1;
}
.row--architecture > *:not(.media){ position:relative; z-index:2; }
.row--architecture .eyebrow{ margin-bottom:27px; }
.row--architecture .serif-title{ margin-bottom:28px; }
.arch__inner{ padding-inline:0; }
.arch__body{ max-width:760px; margin-inline:auto; }


/* ============================================================
   ROW 13 — footer.footer   1440 × 422 · #050505 · pad 80/80
   grid 1.4fr 1fr 1fr 1fr · gap 80
   ============================================================ */
.row--footer{
  background:var(--c-black);
  color:var(--c-white);
  padding-block:80px;
  position:relative;
}
.ftr__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:80px;
  align-items:start;
}
.ftr__col{ display:flex; flex-direction:column; }

.ftr__logo{ margin-bottom:21.58px; }
.ftr__logo img{ width:163px; height:auto; }

/* Inter 400 · 14 / 22.4 · #F6ACBB */
.ftr__col--brand address,
.ftr__note{
  font-size:14px;
  line-height:1.6;
  color:var(--c-pink);
}
.ftr__note{ margin-top:22.17px; }
.ftr__note a{ text-decoration:underline; }

/* Inter 600 · 14 / 22.4 · #F6ACBB — link columns, gap 7 */
.ftr__col > a{
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  color:var(--c-pink);
  padding-block:0;
  margin-bottom:7px;
  transition:opacity .2s ease;
}
.ftr__col > a:hover{ opacity:.7; }

/* Inter 400 · 14 / 22.4 · #FFFFFF */
.ftr__hours{
  margin-top:22.28px;
  font-size:14px;
  line-height:1.6;
  color:var(--c-white);
}

.ftr__col--cta > .btn{ align-self:flex-start; color:var(--c-ink); }

/* Social icons — 50 × 50, gap 36, right-aligned (Figma places them
   103px from the frame edge, slightly past the 1137 container). */
.ftr__social{
  display:flex;
  gap:36px;
  justify-content:flex-end;
  padding-right:103px;
  margin-top:-8px;
}
.ftr__social img{ width:50px; height:50px; }

/* Legal links — Inter 400 · 14 / 22.4 · #F6ACBB */
.ftr__legal{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:40px;
}
.ftr__legal a{
  font-size:14px;
  line-height:1.6;
  color:var(--c-pink);
  text-decoration:underline;
  transition:opacity .2s ease;
}
.ftr__legal a:hover{ opacity:.7; }


/* ============================================================
   RESPONSIVE
   Design is fixed 1440. Below that the container fluidly shrinks;
   Figma's manual line breaks (.lb) are dropped under 1200.
   ============================================================ */

@media (max-width:1240px){
  :root{ --page-inset:48px; --card-pad-x:56px; }
  .row--about{ padding-inline:48px; }
  .hdr__nav{ gap:20px; margin-right:28px; }
  .pillars{ gap:48px; }
  .ftr__grid{ gap:48px; }
  .ftr__social{ padding-right:48px; }
}

@media (max-width:1200px){
  .lb{ display:none; }            /* let copy reflow naturally */
  .card__inner{ max-width:none; }
}

@media (max-width:1100px){
  :root{ --hdr-inset:32px; }
  .hero__title{ font-size:56px; }
  .marquee__item{ font-size:56px; }
  .row--architecture{ padding-block:140px; }
  .pillars{ grid-template-columns:1fr 1fr; gap:56px; }
  .pillars > :last-child{ grid-column:1 / -1; max-width:520px; }
  .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .ftr__col--cta{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .row--split{ grid-template-columns:1fr; }
  #row-07-explore,
  #row-08-beach-club,
  #row-10-wellness,
  #row-11-pods{ min-height:0; }

  /* keep the design's photo-then-copy reading order on rows 10 & 11 */
  #row-10-wellness .video-placeholder,
  #row-11-pods .video-placeholder{ order:-1; }

  .video-placeholder{ min-height:340px; }
  .video-placeholder figcaption{ font-size:16px; }
}

@media (max-width:768px){
  :root{ --page-inset:20px; --hdr-inset:20px; --card-pad-x:24px; }

  /* Row 01 — burger */
  .row--header{ height:auto; flex-wrap:wrap; padding-block:16px; gap:14px; }
  .hdr__logo{ margin-right:auto; }
  .hdr__logo img{ width:112px; height:auto; }
  .hdr__social img{ width:34px; height:34px; }
  .nav__burger{
    order:3;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; cursor:pointer;
  }
  .nav__burger span{ display:block; height:2px; background:var(--c-white); border-radius:2px; }
  .hdr__nav{
    order:4; flex-basis:100%;
    margin:0; flex-direction:column; align-items:stretch; gap:18px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  }
  .nav__toggle:checked ~ .hdr__nav{ max-height:520px; opacity:1; padding-block:16px 8px; }
  .hdr__nav > a{ font-size:15px; }
  .hdr__nav > a.btn{ width:100%; }

  /* Row 02 */
  .row--hero{ padding-bottom:20px; }
  .hero__video{ aspect-ratio:4 / 5; }
  .hero__title{ font-size:32px; }

  /* Row 03 */
  .row--about{ padding-block:64px; }
  .intro{ font-size:17px; }

  /* Row 04 */
  .row--marquee{ height:76px; }
  .marquee__item{ font-size:34px; }
  .marquee__track{ gap:28px; padding-left:28px; }

  /* Row 05 */
  .row--pillars{ padding-block:64px; }
  .pillars{ grid-template-columns:1fr; gap:48px; }
  .pillars > :last-child{ grid-column:auto; max-width:none; }
  .serif-title{ font-size:26px; margin-bottom:20px; }

  /* Rows 06 / 12 */
  .row--strip{ height:88px; }
  .strip__label{ font-size:12px; }

  /* Cards */
  .content-card,
  .card--tall{ padding-block:56px; }
  .shape{ width:220px; height:72px; margin-bottom:32px; }
  .video-placeholder{ min-height:240px; padding:24px; }
  .video-placeholder figcaption{ font-size:13px; }

  /* Row 09 */
  .row--architecture{ padding-block:72px; }

  /* Row 13 */
  .row--footer{ padding-block:56px; }
  .ftr__grid{ grid-template-columns:1fr; gap:36px; }
  .ftr__col--cta{ grid-column:auto; }
  .ftr__social{ padding-inline:20px; justify-content:flex-start; margin-top:32px; }
  .ftr__social img{ width:40px; height:40px; }
  .ftr__legal{ gap:20px; margin-top:28px; }
}


/* ============================================================
   INTERIOR PAGES
   Not in the Figma frame — minimal styling so posts and pages
   inherit the design tokens instead of falling back to browser
   defaults. Uses the same container and type scale as the rows.
   ============================================================ */
.row--page{
  background:var(--c-cream);
  padding-block:96px 120px;
}
.page-shell{ max-width:800px; }
.page-entry + .page-entry{ margin-top:64px; }
.page-shell .serif-title{ margin-bottom:28px; }

.page-content > * + *{ margin-top:20px; }
.page-content h2,
.page-content h3{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  margin-top:40px;
}
.page-content h2{ font-size:28px; }
.page-content h3{ font-size:22px; }
.page-content a{ text-decoration:underline; }
.page-content ul,
.page-content ol{ padding-left:20px; }
.page-content li + li{ margin-top:8px; }
.page-content img{ height:auto; }
.page-content blockquote{
  margin:0;
  padding-left:20px;
  border-left:2px solid var(--c-rose);
}

.pagination{ margin-top:56px; display:flex; gap:16px; }
.pagination a,
.pagination .current{ font-size:14px; font-weight:600; }
.pagination a{ text-decoration:underline; }

@media (max-width:767px){
  .row--page{ padding-block:56px 72px; }
}