/* Doobie Nights brand foundation on GeneratePress.
   Tokens come from the current site: black header, teal + purple, rounded heavy type.
   Nunito stands in for Museo Sans Rounded (swap in Museo if the license covers web use). */

:root{
  /* Brand constants that are not colour choices. */
  --dn-grad-angle:100deg;
  --dn-radius:12px;
  --dn-font:"Nunito", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;

  /* Brand colours INHERIT from the GeneratePress global colours so that
     Appearance > Customize > Colors is the single source of truth. Change a
     colour there and the whole site follows. The values after each comma are
     only fallbacks for when a slot has not been set. */
  /* Header/footer stay dark: GeneratePress's --base is the LIGHTEST slot,
     so this tracks --contrast (the darkest) instead. */
  --dn-black:var(--dn-header-bg, var(--contrast, #0b0b10));
  --dn-ink:var(--contrast, #1c1c22);
  --dn-muted:var(--contrast-2, #5d5d6b);
  --dn-ground:var(--base-2, #f4f3f8);
  --dn-surface:var(--base-3, #ffffff);
  --dn-teal:var(--contrast-3, #2f9bb6);
  --dn-purple:var(--accent, #9207e2);

  /* Derived shades. colour-mix darkens whatever the Customizer supplies, so
     hovers stay on-palette after a brand change instead of drifting. */
  --dn-teal-dark:color-mix(in srgb, var(--dn-teal) 82%, #000);
  --dn-purple-dark:color-mix(in srgb, var(--dn-purple) 82%, #000);
  --dn-line:color-mix(in srgb, var(--dn-ink) 12%, #fff);
  --dn-grad:linear-gradient(var(--dn-grad-angle), var(--dn-purple) 0%, var(--dn-teal) 100%);
}

/* Browsers without colour-mix fall back to fixed shades. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{
    --dn-teal-dark:#1f7489;
    --dn-purple-dark:#7005ad;
    --dn-line:#e3e1ec;
  }
}

/* ------------------------------------------------------------------ type */
body, button, input, select, textarea{font-family:var(--dn-font);}
body{background:var(--dn-ground); color:var(--dn-ink); font-size:17px; line-height:1.65;}
h1,h2,h3,h4,.entry-title{font-family:var(--dn-font); color:var(--dn-ink); font-weight:900; line-height:1.15; letter-spacing:-.005em; text-wrap:balance;}
h1,.entry-title{font-size:clamp(30px,4.2vw,46px);}
.page .entry-title, .page .entry-content > h2{text-transform:uppercase; letter-spacing:.01em;}
h2{font-size:clamp(22px,2.6vw,30px);}
h3{font-size:clamp(18px,2vw,22px); font-weight:800;}
a{color:var(--dn-teal-dark); text-decoration-thickness:1px; text-underline-offset:3px;}
a:hover,a:focus{color:var(--dn-purple);}
:focus-visible{outline:3px solid var(--dn-teal); outline-offset:2px;}

/* ---------------------------------------------------------------- header */
.site-header{background:var(--dn-black); border-bottom:3px solid transparent; border-image:var(--dn-grad) 1;}
.site-header .inside-header{padding-top:14px; padding-bottom:14px;}
.site-logo img, .custom-logo{max-height:46px; width:auto;}
.site-branding{display:none;}               /* the logo already says Doobie Nights */
.main-title a, .site-description{color:#fff;}
.main-navigation .main-nav ul li a{padding-left:11px; padding-right:11px;}
@media (min-width:1025px){ .main-navigation .main-nav > ul{flex-wrap:nowrap;} }
.main-navigation, .main-navigation ul ul{background:transparent;}
.main-navigation .main-nav ul li a{color:#fff; font-weight:800; text-transform:uppercase; font-size:14px; letter-spacing:.04em;}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a{color:#6fd3ea; background:transparent;}
.main-navigation .menu-toggle, .main-navigation .mobile-bar-items a{color:#fff; background:transparent;}
.main-navigation.toggled .main-nav > ul{background:var(--dn-black);}
.main-navigation .main-nav ul ul{background:var(--dn-black);}

/* --------------------------------------------------------------- content */
.separate-containers .inside-article, .one-container .container{background:var(--dn-surface); border-radius:var(--dn-radius);}
.separate-containers .inside-article{box-shadow:0 1px 2px rgba(20,16,40,.05);}
.entry-meta, .entry-meta a{color:var(--dn-muted); font-size:14px;}
.wp-block-image img{border-radius:10px;}
.entry-content > .wp-block-list li{margin-bottom:.35em;}

/* --------------------------------------------------------------- buttons */
.entry-content .wp-block-button__link, .wp-block-button__link, .wp-element-button, button:not(.menu-toggle):not(.dn-agegate__no), .button, input[type="submit"]{
  background:var(--dn-teal); color:#fff; border:0; border-radius:8px;
  font-weight:900; text-transform:uppercase; letter-spacing:.05em; font-size:15px;
  padding:14px 26px; transition:background .15s ease, transform .15s ease;}
.wp-block-button__link:hover, .wp-element-button:hover, .button:hover{background:var(--dn-teal-dark); color:#fff; transform:translateY(-1px);}
/* the "outline" style is our deals / secondary action: purple */
.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link{background:var(--dn-grad); color:#fff;
  background-size:140% 100%; background-position:0 0;
  transition:background-position .25s ease, transform .15s ease, box-shadow .15s ease;}
.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover{background-position:100% 0;
  box-shadow:0 6px 18px color-mix(in srgb, var(--dn-purple) 35%, transparent);}
.wp-block-button.is-style-outline > .wp-block-button__link{background:var(--dn-grad); color:#fff; border:0;
  background-size:140% 100%; background-position:100% 0;
  transition:background-position .25s ease, box-shadow .15s ease;}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{background-position:0 0; color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb, var(--dn-teal) 35%, transparent);}

/* ------------------------------------------------------------------ hero */
.home .entry-header{display:none;}
.dn-hero{
  position:relative; isolation:isolate; overflow:hidden;
  margin:-40px -40px 32px; padding:clamp(40px,7vw,88px) clamp(20px,5vw,56px);
  border-radius:var(--dn-radius) var(--dn-radius) 0 0;
  color:#fff; background:var(--dn-black) var(--dn-hero-image, none) center/cover no-repeat;}
.dn-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(146,7,226,.82) 0%, rgba(47,155,182,.55) 55%, rgba(11,11,16,.35) 100%);}
.dn-hero h1{color:#fff; text-transform:uppercase; font-size:clamp(32px,5vw,56px); max-width:18ch; margin:0 0 14px; text-shadow:0 2px 18px rgba(0,0,0,.25);}
.dn-hero p{color:#fff; font-size:clamp(16px,1.6vw,19px); max-width:58ch; font-weight:600;}
.dn-hero .wp-block-buttons{margin-top:22px;}
@media (max-width:768px){ .dn-hero{margin:-30px -30px 28px;} }

/* ---------------------------------------------------------------- footer */
.dn-footer{background:var(--dn-black); color:#d9d8e3; border-top:3px solid transparent; border-image:var(--dn-grad) 1;}
.dn-footer__inner{max-width:1500px; margin:0 auto; padding:44px 20px 28px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px;}
.dn-footer__title{color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px;}
.dn-footer p{margin:0 0 8px; font-size:15px; line-height:1.55;}
.dn-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.dn-footer a{color:#6fd3ea; text-decoration:none;}
.dn-footer a:hover{color:#fff; text-decoration:underline;}
.site-info{background:#050508; color:#9f9eaf; font-size:13px;}
.site-info a{color:#9f9eaf;}

/* ------------------------------------------------------------ menu cards */
:root{ --dn-accent:var(--dn-teal); --dn-ember:var(--dn-purple); }
.dn-card, .dn-tile{border-radius:var(--dn-radius); border-color:var(--dn-line);}
.dn-card:hover, .dn-tile:hover{border-color:var(--dn-teal); box-shadow:0 8px 24px rgba(47,155,182,.15);}
.dn-shot{background:#f6f5fa;}
.dn-name{font-weight:800;}
.dn-price{font-weight:900; color:var(--dn-ink);}
.dn-tag.dn-sale{color:#fff; background:var(--dn-purple); border-color:var(--dn-purple); font-weight:800;}
.dn-tile b{font-weight:900; text-transform:uppercase; font-size:15px; letter-spacing:.02em;}

/* ------------------------------------------------------- staging markers */
.dn-todo{border:2px dashed var(--dn-purple); border-radius:10px; padding:14px 16px; background:#f7f0fd;}

/* -------------------------------------------------------------- age gate */
.dn-agegate-open, .dn-agegate-open body{overflow:hidden;}
.dn-agegate{position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:20px;
  background:rgba(11,11,16,.92); backdrop-filter:blur(6px);}
.dn-agegate[hidden]{display:none;}
.dn-agegate__box{width:min(460px,100%); background:var(--dn-black); color:#fff; text-align:center;
  border-radius:16px; padding:34px 28px 28px; border:2px solid transparent;
  background-image:linear-gradient(var(--dn-black),var(--dn-black)), var(--dn-grad);
  background-origin:border-box; background-clip:padding-box, border-box;}
.dn-agegate__logo{max-width:220px; height:auto; margin:0 auto 18px; display:block;}
.dn-agegate h2{color:#fff; text-transform:uppercase; font-size:26px; margin:0 0 10px;}
.dn-agegate p{color:#cfcedb; font-size:15px;}
.dn-agegate__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px;}
.dn-agegate__yes{background:var(--dn-teal) !important;}
.dn-agegate__no{background:transparent; color:#fff; border:2px solid #4a4960; border-radius:8px; padding:12px 24px; font-weight:800; cursor:pointer;}
.dn-agegate__no:hover{border-color:#fff;}
.dn-agegate__sorry{color:#ff9aa2 !important; font-weight:700;}

/* ------------------------------------------------------ blog feed images */
/* Featured images came through at full upload size (some over 1200px square),
   so the archive read as a column of giant pictures. Crop to a consistent
   banner here; the single post view is deliberately left alone. */
.blog .post-image, .archive .post-image, .search .post-image{margin-bottom:18px;}
.blog .post-image img, .archive .post-image img, .search .post-image img{
  width:100%; height:auto; aspect-ratio:16/9; max-height:360px; object-fit:cover;
  /* Many featured images are graphics with the headline near the top, so bias
     the crop upward rather than centring it and slicing the text. */
  object-position:center 28%;
  border-radius:var(--dn-radius); display:block;}
@media (max-width:768px){
  .blog .post-image img, .archive .post-image img, .search .post-image img{aspect-ratio:3/2;}
}

/* ------------------------------------------------- language switcher */
.dn-lang{display:flex; align-items:center; margin-left:16px;}
.dn-lang .trp-shortcode-switcher__wrapper{position:relative;}
.dn-lang .trp-language-switcher,
.dn-lang .trp-shortcode-anchor{background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; min-width:0 !important;}
.dn-lang .trp-shortcode-anchor .trp-current-language-item__wrapper{gap:6px; padding:5px 12px;
  border:1px solid rgba(255,255,255,.35) !important; border-radius:999px; background:transparent !important;
  transition:border-color .15s ease;}
.dn-lang .trp-shortcode-anchor:hover .trp-current-language-item__wrapper{border-color:var(--dn-accent) !important;}
.dn-lang .trp-language-item,
.dn-lang .trp-language-item-name{color:#fff !important; text-decoration:none; font-size:13px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;}
.dn-lang .trp-language-item{display:flex; align-items:center; gap:6px;}
.dn-lang .trp-flag-image{width:18px; height:auto; border-radius:2px;}
.dn-lang svg{fill:#fff; width:10px;}
.dn-lang .trp-shortcode-overlay{background:var(--dn-black) !important; border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important; padding:6px !important; box-shadow:0 12px 28px rgba(0,0,0,.35) !important; min-width:170px;}
.dn-lang .trp-shortcode-overlay .trp-current-language-item__wrapper{border:0 !important; padding:8px 10px; border-radius:8px;}
.dn-lang .trp-shortcode-overlay .trp-current-language-item__wrapper:hover{background:rgba(255,255,255,.08);}
@media (max-width:768px){ .dn-lang{margin:10px 0 0; justify-content:flex-start;} }

/* "Español de México" is long; sentence case keeps it inside the pill. */
.dn-lang .trp-language-item-name{text-transform:none !important; letter-spacing:0 !important;
  overflow:visible !important; text-overflow:clip !important; max-width:none !important;}
.dn-lang .trp-language-item{text-transform:none !important; letter-spacing:.01em;}

/* -------------------------------------------------------- blog card grid */
/* Three-across card grid on archives, mimicking the old site: image on top,
   tight title, short excerpt, equal-height cards. */
.generate-columns-container{margin-left:-14px; margin-right:-14px;}
.generate-columns-container > .generate-columns{padding:0 14px 28px;}
.generate-columns-container .inside-article{
  background:var(--dn-surface); border:1px solid var(--dn-line);
  border-radius:var(--dn-radius); overflow:hidden; padding:0;
  height:100%; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(20,16,40,.05); transition:box-shadow .18s ease, transform .18s ease;}
.generate-columns-container .inside-article:hover{box-shadow:0 10px 26px rgba(20,16,40,.12); transform:translateY(-2px);}
.generate-columns-container .post-image{margin:0;}
.generate-columns-container .post-image img{border-radius:0; aspect-ratio:16/9; max-height:none;}
.generate-columns-container .entry-header,
.generate-columns-container .entry-summary,
.generate-columns-container .entry-meta{padding-left:20px; padding-right:20px;}
.generate-columns-container .entry-header{padding-top:18px;}
.generate-columns-container .entry-title{font-size:19px; line-height:1.3; letter-spacing:0; margin:0 0 6px;}
.generate-columns-container .entry-title a{color:var(--dn-teal-dark); text-decoration:none;}
.generate-columns-container .entry-title a:hover{color:var(--dn-purple);}
.generate-columns-container .entry-summary{font-size:15px; line-height:1.55; color:var(--dn-muted);
  margin:0; padding-bottom:20px; flex:1 1 auto;}
.generate-columns-container .entry-meta{font-size:12.5px; color:var(--dn-muted); padding-bottom:16px;}
.generate-columns-container .entry-meta a{color:var(--dn-muted);}
/* The old site's cards carried no taxonomy or comment clutter. */
.generate-columns-container .cat-links,
.generate-columns-container .tags-links,
.generate-columns-container .comments-link{display:none;}
@media (max-width:1024px){
  .generate-columns-container .entry-title{font-size:18px;}
}

/* Featured images run from 1:1 to 16:9. Cropping them to a single ratio was
   slicing the tops and bottoms off the square ones, so the card shows the
   WHOLE image inside a fixed box instead, with breathing room around it. */
.generate-columns-container .post-image{padding:14px 14px 0; background:var(--dn-surface);}
.generate-columns-container .post-image img{
  aspect-ratio:3/2; object-fit:contain; object-position:center;
  max-height:none; border-radius:8px; background:var(--dn-ground);}