/*
Theme Name:  No Deposit UK (Astra child)
Theme URI:   https://100freewelcomebonusnodepositrequired.uk/
Description: Child theme for Astra. On activation it applies the No Deposit UK design: palette, fonts, header with logo, menu and 18+ badge, footer with the compliance strip, page title off, 1140px container. Everything stays editable in Appearance → Customize.
Author:      No Deposit UK
Template:    astra
Version:     1.2.0
License:     GNU General Public License v2 or later
Text Domain: astra-child-nodeposit
*/

/* ------------------------------------------------------------------
   Everything below is what the Customizer has no setting for.
   Colours and fonts come from the Customizer (set on activation).
   ------------------------------------------------------------------ */

/* 18+ chip (header HTML element and footer strip) */
.nb-age {
  display: inline-block; width: 2.1rem; height: 2.1rem; line-height: 1.85rem; text-align: center;
  border: 2px solid var(--ast-global-color-2); border-radius: 50%; font-weight: 700; font-size: 0.82rem;
  color: var(--ast-global-color-2); vertical-align: middle;
}
.site-footer .nb-age { border-color: #fff; color: #fff; }

/* Footer compliance strip and disclosure */
.nb-compliance {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.8rem 1.2rem; font-size: 0.9rem;
}
.site-footer .nb-compliance, .site-footer .nb-disclosure { color: #E6EFEA; }
.site-footer .nb-compliance a { color: #fff; text-decoration: underline; }
.site-footer .nb-compliance a:hover { color: var(--ast-global-color-6); }
.nb-disclosure { font-size: 0.85rem; opacity: 0.85; max-width: 60rem; margin: 1rem auto 0; text-align: center; }
.site-footer .ast-builder-html-element { color: #E6EFEA; }

/* Menu: soft rounded hover like the article's cards; rounded submenu.
   Desktop header only: in Astra's mobile menu each item is a flex column, and
   overflow:hidden on the sub-menu lets it shrink, which split the item's height
   between the link and the list and cut the list off. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link { border-radius: 6px; }
#ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link { background: var(--ast-global-color-7); }
#ast-desktop-header .main-header-menu .sub-menu { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 38, 31, 0.08); }

/* Desktop dropdowns. A list of more than 8 links (class nb-cols-2, set when the
   theme builds the menu) runs in two columns, so 17 or 18 links fit on a 768px
   laptop screen. The last four dropdowns open leftwards to stay inside the window
   (on a 960-1100px screen even the third one would run past the right edge).
   Astra hides sub-menus with left:-999em and visibility, so this is safe to set. */
@media (min-width: 922px) {
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu .menu-link { padding-top: 0.65em; padding-bottom: 0.65em; }
  #ast-desktop-header .main-header-menu > .nb-cols-2 > .sub-menu { width: 500px; column-count: 2; column-gap: 0; }
  #ast-desktop-header .main-header-menu > .nb-cols-2 > .sub-menu > .menu-item { break-inside: avoid; }
  #ast-desktop-header .main-header-menu > .menu-item:nth-last-child(-n+4):hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .menu-item:nth-last-child(-n+4).focus > .sub-menu { left: auto; right: 0; }
}

/* Below 1100px the logo and six top-level links do not fit on one line at the
   default spacing; tighten them so the row never wraps onto a second line. */
@media (min-width: 922px) and (max-width: 1099px) {
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
}

/* Headings: tighter tracking to match the article's Literata */
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Focus ring in brand gold */
:focus-visible { outline: 3px solid var(--ast-global-color-6); outline-offset: 2px; }