/*
Theme Name: Roamdusk
Theme URI: https://roamdusk.com/
Author: Zakaria
Author URI: https://roamdusk.com/about/
Description: A travel-guide theme built around timing. Fifteen templates covering the full site structure: home, region and country hubs, guides, city guides, topic archives, author, search, contact, newsletter and 404. Palette taken from the three twilights; every text-on-background pair is verified against WCAG AA in both light and dark.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
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: roamdusk
Tags: blog, two-columns, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ===========================================================
   1. Tokens
   The palette is the three twilights plus the Belt of Venus.
   Verified: navy #0C1224 on ember #DB7B33 is 6.11:1 and passes.
   White on #DB7B33 is 3.05:1 and fails. Do not change it to white.
   =========================================================== */
:root{
  --rd-astronomical:#0C1224; --rd-nautical:#1B2C4E; --rd-civil:#40628A;
  --rd-venus:#C98795; --rd-afterglow:#F3C173;
  --rd-ground:#F0EFF4; --rd-surface:#FAF9FC; --rd-sunken:#E6E5EE;
  --rd-ink:#161B2E; --rd-muted:#4A5169; --rd-line:#D6D5DE;
  --rd-ember:#DB7B33; --rd-ember-text:#A85416; --rd-on-ember:#0C1224;
  --rd-shadow:0 1px 2px rgba(12,18,36,.06), 0 8px 24px -12px rgba(12,18,36,.18);
  --rd-display:"Fraunces",Georgia,"Times New Roman",serif;
  --rd-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --rd-measure:66ch; --rd-radius:14px; --rd-wrap:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --rd-ground:#0C1224; --rd-surface:#141B31; --rd-sunken:#1B2440;
    --rd-ink:#ECEAF2; --rd-muted:#A8AFC4; --rd-line:#2C3654;
    --rd-ember:#E68A45; --rd-ember-text:#E68A45; --rd-on-ember:#0C1224;
    --rd-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --rd-ground:#0C1224; --rd-surface:#141B31; --rd-sunken:#1B2440;
  --rd-ink:#ECEAF2; --rd-muted:#A8AFC4; --rd-line:#2C3654;
  --rd-ember:#E68A45; --rd-ember-text:#E68A45; --rd-on-ember:#0C1224;
  --rd-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.6);
}

/* ===========================================================
   2. Base
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--rd-ground); color:var(--rd-ink);
  font-family:var(--rd-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--rd-ember-text)}
h1,h2,h3,h4,h5,h6{font-family:var(--rd-display); font-weight:600; line-height:1.15;
  text-wrap:balance; margin:0}
:focus-visible{outline:3px solid var(--rd-ember); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.rd-skip{position:absolute; left:-9999px; top:0; z-index:999; padding:.75rem 1rem;
  background:var(--rd-ember); color:var(--rd-on-ember); font-weight:700; border-radius:0 0 8px 0}
.rd-skip:focus{left:0}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap}

.rd-wrap{max-width:var(--rd-wrap); margin-inline:auto; padding-inline:1.25rem}
.rd-section{padding-block:3.5rem}
.rd-section + .rd-section{padding-top:0}

/* ===========================================================
   3. Header
   =========================================================== */
.rd-head{border-bottom:1px solid var(--rd-line); background:var(--rd-surface);
  position:sticky; top:0; z-index:20}
.rd-head__in{display:flex; align-items:center; gap:1.5rem; padding-block:.85rem}
.rd-logo{display:flex; align-items:center; gap:.6rem; font-family:var(--rd-display);
  font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:var(--rd-ink); text-decoration:none}
.rd-logo__mark{width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(170deg,var(--rd-astronomical) 0%,var(--rd-nautical) 32%,
    var(--rd-civil) 54%,var(--rd-venus) 72%,var(--rd-ember) 88%,var(--rd-afterglow) 100%)}
.rd-nav{margin-left:auto}
.rd-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.25rem; flex-wrap:wrap}
.rd-nav a{font-size:.9rem; font-weight:500; color:var(--rd-muted); text-decoration:none;
  padding:.5rem .7rem; border-radius:8px; display:block}
.rd-nav a:hover{color:var(--rd-ink); background:var(--rd-sunken)}
.rd-nav .current-menu-item > a,.rd-nav .current_page_item > a,
.rd-nav .current-menu-ancestor > a{color:var(--rd-ink); font-weight:600; background:var(--rd-sunken)}
.rd-nav li{position:relative}
.rd-nav .sub-menu{display:none; position:absolute; top:calc(100% + .4rem); left:0; min-width:13rem;
  background:var(--rd-surface); border:1px solid var(--rd-line); border-radius:12px;
  padding:.4rem; box-shadow:var(--rd-shadow); flex-direction:column; z-index:30}
.rd-nav li:hover > .sub-menu,.rd-nav li:focus-within > .sub-menu{display:flex}
.rd-toggle{display:none; font:inherit; font-size:.9rem; font-weight:600; background:none;
  border:1px solid var(--rd-line); border-radius:8px; padding:.45rem .7rem; color:var(--rd-ink);
  cursor:pointer; min-height:44px}

/* social rail */
.rd-rail{display:flex; gap:.4rem}
.rd-rail a{width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--rd-sunken); color:var(--rd-muted); text-decoration:none}
.rd-rail a:hover{background:var(--rd-ember); color:var(--rd-on-ember)}
.rd-rail svg{width:16px; height:16px; fill:currentColor}

/* ===========================================================
   4. Hero and page heads
   =========================================================== */
.rd-hero{position:relative; isolation:isolate}
.rd-hero img{width:100%; height:min(58vh,460px); object-fit:cover}
.rd-hero__veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,18,36,.15) 0%,rgba(12,18,36,.55) 55%,rgba(12,18,36,.86) 100%)}
.rd-hero__txt{position:absolute; inset:auto 0 0 0; padding-block:2.5rem; color:#F3F2F7}
.rd-hero h1{font-size:clamp(2rem,5vw,3.4rem); color:#fff; letter-spacing:-.02em}
.rd-hero p{max-width:52ch; margin:.9rem 0 0; color:#DCDAE6; font-size:1.05rem}
.rd-eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rd-muted); margin:0 0 .75rem}
.rd-hero .rd-eyebrow{color:var(--rd-afterglow)}

.rd-phead{padding-block:2.5rem 1.5rem}
.rd-phead h1{font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.02em}
.rd-phead p{color:var(--rd-muted); max-width:58ch; margin:.7rem 0 0}

.rd-crumbs{font-size:.82rem; color:var(--rd-muted); padding-top:1.5rem}
.rd-crumbs a{color:var(--rd-muted); text-decoration:none}
.rd-crumbs a:hover{color:var(--rd-ember-text)}
.rd-crumbs span[aria-hidden]{margin-inline:.4rem; opacity:.5}

.rd-sec-head{margin-bottom:1.75rem}
.rd-sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.rd-sec-head p{color:var(--rd-muted); margin:.5rem 0 0; max-width:var(--rd-measure)}

/* ===========================================================
   5. Cards
   =========================================================== */
.rd-grid{display:grid; gap:1.5rem}
.rd-grid--3{grid-template-columns:repeat(3,1fr)}
.rd-grid--2{grid-template-columns:repeat(2,1fr)}
.rd-card{background:var(--rd-surface); border:1px solid var(--rd-line);
  border-radius:var(--rd-radius); overflow:hidden; box-shadow:var(--rd-shadow);
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.rd-card:hover{transform:translateY(-3px); box-shadow:0 12px 32px -14px rgba(12,18,36,.35)}
.rd-card img{aspect-ratio:3/2; object-fit:cover; width:100%}
.rd-card__body{padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column;
  gap:.5rem; flex:1}
.rd-card h3{font-size:1.12rem}
.rd-card h3 a{color:var(--rd-ink); text-decoration:none}
.rd-card h3 a:hover{color:var(--rd-ember-text)}
.rd-card p{margin:0; color:var(--rd-muted); font-size:.94rem; line-height:1.55}
.rd-tag{align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rd-ember-text); border:1px solid currentColor;
  padding:.18rem .5rem; border-radius:999px; text-decoration:none}

/* ===========================================================
   6. Article
   =========================================================== */
.rd-article{max-width:var(--rd-measure); margin-inline:auto}
.rd-article p,.rd-article ul,.rd-article ol{font-size:1.05rem; line-height:1.75}
.rd-article > h2{font-size:1.6rem; margin-top:2.5rem; margin-bottom:.7rem}
.rd-article > h3{font-size:1.2rem; margin-top:1.8rem; margin-bottom:.4rem;
  font-family:var(--rd-body); font-weight:700}
.rd-article img{border-radius:12px; margin-block:1.5rem}
.rd-article blockquote{border-left:4px solid var(--rd-ember); margin:1.5rem 0;
  padding:.25rem 0 .25rem 1.25rem; color:var(--rd-muted); font-style:normal}
.rd-meta{display:flex; gap:1rem; flex-wrap:wrap; color:var(--rd-muted); font-size:.86rem;
  border-block:1px solid var(--rd-line); padding-block:.8rem; margin-block:1.5rem}

/* read next */
.rd-readnext{border-top:1px solid var(--rd-line); margin-top:2.5rem; padding-top:1.5rem}
.rd-readnext h2{font-size:1.1rem; font-family:var(--rd-body); font-weight:700; margin-bottom:.9rem}
.rd-readnext ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.rd-readnext a{display:flex; gap:.7rem; align-items:baseline; text-decoration:none;
  background:var(--rd-surface); border:1px solid var(--rd-line); border-radius:10px;
  padding:.75rem .95rem}
.rd-readnext a:hover{border-color:var(--rd-ember)}
.rd-readnext .rd-dir{font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rd-muted); flex:none; min-width:4.5rem}
.rd-readnext b{color:var(--rd-ink); font-weight:600; font-size:.96rem}

/* ===========================================================
   7. Components
   =========================================================== */
.rd-months-wrap{margin-block:1.25rem}
.rd-months{display:grid; grid-template-columns:repeat(12,1fr); gap:.4rem}
.rd-months span{border-radius:9px; padding:.7rem .25rem; text-align:center; font-size:.78rem;
  font-weight:600; border:1px solid var(--rd-line); background:var(--rd-surface); color:var(--rd-muted)}
.rd-months .rd-m-best{background:var(--rd-ember); color:var(--rd-on-ember); border-color:transparent}
.rd-months .rd-m-ok{background:var(--rd-afterglow); color:var(--rd-astronomical); border-color:transparent}
.rd-legend{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.8rem; color:var(--rd-muted);
  margin:.75rem 0 0}
.rd-legend i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.35rem}

.rd-facts{background:var(--rd-sunken); border:1px solid var(--rd-line);
  border-left:4px solid var(--rd-ember); border-radius:var(--rd-radius);
  padding:1.4rem 1.5rem; margin-block:1.75rem}
.rd-facts__label{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rd-muted); font-weight:700; margin:0 0 .9rem}
.rd-facts dl{margin:0; display:grid; gap:.55rem 1.5rem}
.rd-facts dl > div{display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.5rem 1.5rem}
.rd-facts dt{font-weight:600; font-size:.92rem; margin:0}
.rd-facts dd{margin:0; color:var(--rd-muted); font-size:.92rem}
.rd-facts dd small{display:block; opacity:.85; font-size:.85em}

.rd-note{border:1px dashed var(--rd-line); border-radius:var(--rd-radius);
  padding:1.1rem 1.3rem; background:var(--rd-surface); color:var(--rd-muted);
  font-size:.95rem; margin-block:1.5rem}
.rd-note p{margin:0 0 .6rem; font-size:.95rem}
.rd-note p:last-child{margin-bottom:0}

.rd-deal{display:grid; grid-template-columns:auto 1fr auto; gap:1rem 1.25rem; align-items:center;
  background:var(--rd-surface); border:1px solid var(--rd-line); border-radius:var(--rd-radius);
  padding:1.15rem 1.3rem; margin-block:1rem}
.rd-deal__glyph{font-size:1.2rem; color:var(--rd-ember-text)}
.rd-deal__t{display:block; font-weight:600; font-size:1rem}
.rd-deal__d{display:block; color:var(--rd-muted); font-size:.9rem}
.rd-deal__btn{background:var(--rd-ember); color:var(--rd-on-ember); border:0; border-radius:10px;
  padding:.7rem 1.15rem; font-weight:700; font-size:.92rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; white-space:nowrap}
.rd-deal__btn:hover{filter:brightness(1.06)}
.rd-disclosure{font-size:.82rem; color:var(--rd-muted); border-top:1px solid var(--rd-line);
  padding-top:.9rem; margin-top:1.25rem}
.rd-horizon{border:0; height:1px; background:linear-gradient(90deg,transparent,
  var(--rd-venus) 30%,var(--rd-ember) 50%,var(--rd-venus) 70%,transparent); margin-block:2.5rem}

.rd-btn{background:var(--rd-ember); color:var(--rd-on-ember); border:0; border-radius:10px;
  padding:.7rem 1.15rem; font:inherit; font-size:.92rem; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; cursor:pointer}
.rd-btn:hover{filter:brightness(1.06)}

/* tiles */
.rd-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.rd-tile{background:var(--rd-surface); border:1px solid var(--rd-line);
  border-radius:var(--rd-radius); padding:1.15rem 1.25rem; text-decoration:none;
  color:var(--rd-ink); display:block}
.rd-tile:hover{border-color:var(--rd-ember)}
.rd-tile strong{display:block; font-family:var(--rd-display); font-size:1.05rem; margin-bottom:.2rem}
.rd-tile span{color:var(--rd-muted); font-size:.88rem}

/* newsletter */
.rd-letter{background:linear-gradient(155deg,var(--rd-astronomical) 0%,var(--rd-nautical) 55%,
  var(--rd-civil) 100%); border-radius:var(--rd-radius); padding:2.5rem; color:#ECEAF2}
.rd-letter h2{color:#fff; font-size:clamp(1.4rem,3vw,2rem)}
.rd-letter p{color:#DCDFE9; max-width:48ch}
.rd-form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem}
.rd-form input{flex:1 1 15rem; padding:.75rem .9rem; border-radius:10px; border:1px solid #38416B;
  background:#0C1224; color:#ECEAF2; font:inherit; font-size:.95rem; min-height:44px}
.rd-form input::placeholder{color:#8A93AF}

/* rows, forms, empty states */
.rd-rows{display:grid; gap:.75rem; margin-top:1.5rem}
.rd-row{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  background:var(--rd-surface); border:1px solid var(--rd-line); border-radius:12px;
  padding:.9rem 1.1rem}
.rd-row__n{font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--rd-muted)}
.rd-row b{font-weight:600}
.rd-row small{display:block; color:var(--rd-muted); font-size:.88rem; font-weight:400}
.rd-row a.rd-go{color:var(--rd-ember-text); font-size:.86rem; font-weight:600;
  text-decoration:none; white-space:nowrap}

.rd-field{display:grid; gap:.35rem; margin-bottom:1rem}
.rd-field label{font-size:.82rem; font-weight:600}
.rd-field input,.rd-field textarea,.rd-field select{padding:.7rem .85rem; border-radius:10px;
  border:1px solid var(--rd-line); background:var(--rd-surface); color:var(--rd-ink);
  font:inherit; font-size:.96rem; min-height:44px; width:100%}
.rd-field textarea{min-height:9rem; resize:vertical}
.rd-field .rd-hint{font-size:.8rem; color:var(--rd-muted)}
.rd-formcard{background:var(--rd-surface); border:1px solid var(--rd-line);
  border-radius:var(--rd-radius); padding:1.5rem; max-width:34rem}

.rd-empty{text-align:center; padding-block:4rem}
.rd-empty__code{font-family:ui-monospace,Menlo,monospace; font-size:clamp(3rem,10vw,6rem);
  font-weight:700; color:var(--rd-ember-text); line-height:1; letter-spacing:-.03em; margin:0}
.rd-search{display:flex; gap:.6rem; flex-wrap:wrap; max-width:34rem; margin-top:1.25rem}
.rd-search input{flex:1 1 14rem; padding:.75rem .9rem; border-radius:10px;
  border:1px solid var(--rd-line); background:var(--rd-surface); color:var(--rd-ink);
  font:inherit; min-height:44px}
.rd-search--center{margin-inline:auto; justify-content:center}

/* author */
.rd-author{display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center;
  background:var(--rd-surface); border:1px solid var(--rd-line); border-radius:var(--rd-radius);
  padding:1.5rem}
.rd-author img{border-radius:50%; width:88px; height:88px}

/* tables */
.rd-tablewrap{overflow-x:auto; margin-block:1.5rem; border:1px solid var(--rd-line);
  border-radius:var(--rd-radius); background:var(--rd-surface)}
.rd-tablewrap table,.rd-article table{border-collapse:collapse; width:100%; font-size:.92rem}
.rd-article table{margin-block:1.5rem}
.rd-tablewrap th,.rd-tablewrap td,.rd-article th,.rd-article td{text-align:left;
  padding:.7rem .9rem; border-bottom:1px solid var(--rd-line); vertical-align:top}
.rd-tablewrap th,.rd-article th{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rd-muted); font-weight:700}
.rd-tablewrap tr:last-child td{border-bottom:0}

/* pagination */
.rd-pagination{display:flex; gap:.4rem; align-items:center; margin-top:2.5rem; flex-wrap:wrap}
.rd-pagination .page-numbers{min-width:40px; min-height:40px; display:grid; place-items:center;
  border:1px solid var(--rd-line); border-radius:9px; text-decoration:none; color:var(--rd-ink);
  font-size:.9rem; font-weight:600; padding-inline:.6rem}
.rd-pagination .current{background:var(--rd-ember); color:var(--rd-on-ember); border-color:transparent}
.rd-pagination .dots{border:0; color:var(--rd-muted)}

/* ===========================================================
   8. Footer
   =========================================================== */
.rd-foot{border-top:1px solid var(--rd-line); background:var(--rd-surface);
  margin-top:3.5rem; padding-block:2.5rem}
.rd-foot__cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
.rd-foot h2{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rd-muted); font-family:var(--rd-body); font-weight:700; margin-bottom:.7rem}
.rd-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.rd-foot a{color:var(--rd-muted); text-decoration:none; font-size:.9rem}
.rd-foot a:hover{color:var(--rd-ember-text)}
.rd-foot__tag{color:var(--rd-muted); font-size:.9rem; max-width:30ch; margin-top:.7rem}
.rd-legal{border-top:1px solid var(--rd-line); margin-top:2rem; padding-top:1.25rem;
  color:var(--rd-muted); font-size:.82rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap}

/* ===========================================================
   9. WordPress core classes
   =========================================================== */
.alignwide{max-width:min(1120px,92vw); margin-inline:auto}
.alignfull{max-width:none; width:100%}
.alignleft{float:left; margin:.5rem 1.5rem 1rem 0}
.alignright{float:right; margin:.5rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.85rem; color:var(--rd-muted); text-align:center;
  margin-top:.5rem}
.sticky .rd-tag::after{content:" · pinned"}
.rd-sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}

/* ===========================================================
   10. Responsive. Test at 320px.
   =========================================================== */
@media (max-width:1000px){
  .rd-grid--3{grid-template-columns:repeat(2,1fr)}
  .rd-tiles{grid-template-columns:repeat(2,1fr)}
  .rd-foot__cols{grid-template-columns:1fr 1fr}
  .rd-months{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:720px){
  body{font-size:16px}
  .rd-head__in{flex-wrap:wrap; gap:.75rem}
  .rd-toggle{display:inline-flex; align-items:center; margin-left:auto}
  .rd-nav{margin-left:0; order:3; width:100%; display:none}
  .rd-nav.is-open{display:block}
  .rd-nav ul{flex-direction:column; gap:.1rem}
  .rd-nav .sub-menu{position:static; display:flex; border:0; box-shadow:none; padding-left:1rem}
  .rd-grid--3,.rd-grid--2,.rd-tiles{grid-template-columns:1fr}
  .rd-deal{grid-template-columns:1fr}
  .rd-deal__btn{width:100%; justify-content:center}
  .rd-facts dl > div{grid-template-columns:1fr; gap:.15rem}
  .rd-facts dt{margin-top:.6rem}
  .rd-letter{padding:1.5rem}
  .rd-section{padding-block:2.5rem}
  .rd-row{grid-template-columns:auto 1fr}
  .rd-row a.rd-go{grid-column:2; justify-self:start}
  .rd-author{grid-template-columns:1fr}
}
@media (max-width:400px){
  .rd-months{grid-template-columns:repeat(4,1fr)}
  .rd-wrap{padding-inline:1rem}
}
@media print{
  .rd-head,.rd-foot,.rd-rail,.rd-deal__btn,.rd-letter{display:none}
  body{background:#fff; color:#000}
}