/**
 * Base fixes loaded after main.css (compiled Tailwind).
 *
 * @package AngeloseGlobal
 */

/* Inter v4.1 variable (self hosted, SIL OFL 1.1, see assets/fonts/Inter-LICENSE.txt) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* Light mode primary: the intended logo navy #18183f (main.css ships bright blue) */
.light {
    --primary: 240 45% 17%;
    --primary-hover: 240 43% 14%;
    --primary-glow: 240 45% 25%;
    --input-focus: 240 45% 17%;
    --ring: 240 45% 17%;
    --gradient-primary: linear-gradient(135deg, hsl(240 45% 17%), hsl(240 45% 30%));
    --shadow-hover: 0 4px 16px -4px hsl(240 45% 17% / .1);
    --shadow-glow: 0 0 20px hsl(240 45% 17% / .15);
}

/* Footer brand lockup: square icon beside the name, one link to home.
   Same in light and dark; the icon is never inverted. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}
.brand-lockup__icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}
/* Dark mode: show only the white AG circle (the navy tile would vanish on the dark footer),
   scaled so the circle fills the 40px slot, and a white name, matching the header logo. */
.dark .brand-lockup__icon,
:root:not(.light) .brand-lockup__icon {
    border-radius: 0;
    clip-path: circle(31% at 50% 50%);
    transform: scale(1.6);
}
.dark .brand-lockup .text-gradient-primary,
:root:not(.light) .brand-lockup .text-gradient-primary {
    background: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Header logo size limits; white in dark mode (moved from inline styles in header.php) */
.logo-img {
    min-height: 48px;
    max-height: 80px;
}
.dark .logo-img,
:root:not(.light) .logo-img {
    filter: brightness(0) invert(1);  /* white logo whenever the page is not in light mode */
}

/* About banner: branded navy gradient instead of a stock photo */
.about-banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(11rem, 20vw, 15rem);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 85% 10%, hsl(240 45% 30% / 0.9) 0%, transparent 60%),
        linear-gradient(135deg, #18183f 0%, #14163c 55%, #0d0e24 100%);
}
.about-banner__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #ffffff;
}
.about-banner__lead {
    margin: 0;
    max-width: 38rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

/* Contact details: long values (the email address) wrap instead of widening the page on small phones */
#contact .flex-1 {
    min-width: 0;
}
#contact a[href^="mailto:"] {
    overflow-wrap: anywhere;
}

/* ========================================
   Post and page content (#post-content / .entry-content)
   Text follows the theme in both modes. Editor colour choices still work,
   except plain black text in dark mode and plain white text in light mode,
   which would be invisible, so those follow the theme too.
   ======================================== */
#post-content,
.entry-content {
    color: hsl(var(--foreground) / 0.88);
    font-size: 1.125rem;
    line-height: 1.8;
}
#post-content :is(h1, h2, h3, h4, h5, h6),
.entry-content :is(h1, h2, h3, h4, h5, h6) {
    color: hsl(var(--foreground));
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
#post-content :is(strong, b),
.entry-content :is(strong, b) {
    color: hsl(var(--foreground));
}
#post-content blockquote,
.entry-content blockquote {
    border-left: 4px solid var(--ag-accent, #f5b83d);
    color: hsl(var(--foreground) / 0.8);
}
#post-content :not(pre) > code,
.entry-content :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: 0.3rem;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 0.92em;
}
#post-content hr,
.entry-content hr {
    border-color: hsl(var(--border));
}

/* Links: brand colour with a visible underline (beats block editor link colours) */
#post-content a[href],
.entry-content a[href] {
    color: #18183f !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.18em;
}
#post-content a[href]:hover,
.entry-content a[href]:hover {
    text-decoration-thickness: 2px !important;
}
.dark #post-content a[href],
.dark .entry-content a[href],
:root:not(.light) #post-content a[href],
:root:not(.light) .entry-content a[href] {
    color: #8fb4ff !important;
}

/* Editor text colours that would vanish against the page */
.dark #post-content :is(.has-black-color, .has-contrast-color):not(.has-background),
.dark .entry-content :is(.has-black-color, .has-contrast-color):not(.has-background),
.dark #post-content :is(.has-black-color, .has-contrast-color):not(.has-background) :is(strong, b, em, span),
.dark .entry-content :is(.has-black-color, .has-contrast-color):not(.has-background) :is(strong, b, em, span) {
    color: inherit !important;
}
.dark #post-content :is(h1, h2, h3, h4, h5, h6):is(.has-black-color, .has-contrast-color):not(.has-background),
.dark .entry-content :is(h1, h2, h3, h4, h5, h6):is(.has-black-color, .has-contrast-color):not(.has-background) {
    color: hsl(var(--foreground)) !important;
}
.light #post-content .has-white-color:not(.has-background),
.light .entry-content .has-white-color:not(.has-background) {
    color: inherit !important;
}
/* Highlighted words with a custom colour (editor "Highlight" > custom colour, e.g. navy #18183f)
   are dark by design; in dark mode they use the light text colour. Preset highlight colours
   (they carry a has-<name>-color class) are left as chosen. */
.dark #post-content mark[class="has-inline-color"],
.dark .entry-content mark[class="has-inline-color"],
:root:not(.light) #post-content mark[class="has-inline-color"],
:root:not(.light) .entry-content mark[class="has-inline-color"] {
    color: hsl(var(--foreground)) !important;
}

/* Space below the fixed header on inner pages */
.site-main-offset {
    margin-top: 80px;
}