/*
Theme Name: Quantcore
Theme URI: https://quantcore.co.uk
Description: Site theme for quantcore.co.uk. Built on the PB Boilerplate parent theme.
Author: The Publishing Bureau
Author URI: https://publishingbureau.co.uk
Template: pb-boilerplate
Version: 1.61.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Copyright: © 2026 The Publishing Bureau. All rights reserved.
Text Domain: quantcore
*/

/* ==========================================================================
   CSS Variables - Customise for Your Project
   Override parent theme defaults here to match your design
   ========================================================================== */

:root {
    /* Layout - Customise dimensions and spacing */
    --header-height: 110px;
    --header--background--colour: rgba(16, 17, 17, 0.50);
    --header--link--colour: var(--wp--preset--color--white);
    --header--border--colour: transparent;
    --footer--background--colour: var(--wp--preset--color--black);
    --footer--border--colour: var(--wp--preset--color--white);
    --footer--logo--max-height: 28px;
    --footer--links--padding-left: 4rem;
    --footer--links--padding-right: 8rem;
    /* --content-width: 1200px; */
    /* --content-padding: 20px; */

    /* Colours - Defined in theme.json
       To customise colours, edit the child theme's theme.json palette.
       Parent palette slugs: black, white, highlight, dark-grey, grey, blue, navy.
       Override values in theme.json → settings.color.palette */

    /* Typography - Define fonts in theme.json
       To customize fonts for your project, edit the child theme's theme.json file:
       settings.custom.typography.heading.fontFamily
       settings.custom.typography.body.fontFamily
    */
    /* Body line-height is set in this theme's theme.json
       (styles.typography.lineHeight). */
    /* Heading line-height follows the font's own metrics by default.
       Set it per level in this theme's theme.json (styles.elements.hN)
       where the design calls for something other than the font default. */
    /* --font-weight-normal: 400; */
    /* --font-weight-bold: 600; */

    /* Font Sizes - Customise heading and text sizes
       Use theme.json for font sizes - it applies to both front end and editor */

    /* Spacing - Customise spacing scale */
    /* --spacing-xs: 0.5em; */
    /* --spacing-sm: 1em; */
    /* --spacing-md: 1.5em; */
    /* --spacing-lg: 2em; */
    /* --spacing-xl: 3em; */

    /* Border Radius - Customise corner roundness */
    /* --border-radius-sm: 3px; */
    /* --border-radius-md: 4px; */

    /* Transitions - Customise animation speed */
    /* --transition-speed: 0.2s; */

    /* Social Media Links - Defined in theme.json
       To customise social link appearance, edit the child theme's theme.json file:
       settings.custom.socialLinks

       Available options:
       - iconSize: Size of the icon SVG (default: 20px)
       - circleSize: Size of the circular button (default: 40px)
       - background: Background colour of the circle (default: #2C3E50)
       - iconColor: Colour of the icon (default: #FFFFFF)
       - backgroundHover: Background colour on hover (default: #3498DB)
       - iconColorHover: Icon colour on hover (default: #FFFFFF)
    */
    --wp--preset--color--highlight: var(--wp--preset--color--cyan);
    --wp--preset--color--dark-grey: var(--wp--preset--color--mid-grey);
    --wp--preset--color--grey: var(--wp--preset--color--accent-grey);
    --wp--preset--color--blue: var(--wp--preset--color--accent-blue);
    --wp--preset--color--navy: #005177;

    /* The header stands 1px taller than --header-height: the parent draws a
       bottom border on it, and border-box counts it. Lifting a hero by the
       variable alone leaves a 1px strip of page showing under the fold. */
    --hero-header-offset: calc(var(--header-height) + 1px);
}

/* ==========================================================================
   Child Theme Custom Styles
   Add your additional CSS below
   ========================================================================== */

/*
 * Add any custom styles that aren't variable overrides here.
 * These will be loaded after the parent theme styles.
 */
::selection {
    background-color: var(--wp--preset--color--highlight);
    color: var(--wp--preset--color--black);
}
.site-header {
   background: transparent;
}
.site-header::before {
   background: var(--header--background--colour);
   -webkit-backdrop-filter: blur(25px);
   backdrop-filter: blur(25px);
   content: "";
   inset: 0;
   pointer-events: none;
   position: absolute;
   z-index: -1;
}
.main-navigation.toggled > #primary-menu {
   -webkit-backdrop-filter: blur(25px);
   backdrop-filter: blur(25px);
}
#primary-menu {
    flex: 1;
}
/* Thicken on hover without reflowing the nav. Real bold is a wider set of
   glyphs, so font-weight shifts every item to its left by ~3px as the cursor
   crosses the menu. A stroke draws around the existing glyphs, leaving the
   font metrics — and therefore the layout — untouched.

   paint-order keeps the stroke outside the letterforms; centred on the glyph
   edge it would grow inward and fill the counters in a, e and o. */
.main-navigation a:hover {
   -webkit-text-stroke: 0.6px currentColor;
   paint-order: stroke fill;
}
.main-navigation a:focus {
   background-color: transparent !important;
   color: var(--header--link--colour);
}

/* ==========================================================================
   Footer
   The parent paints a light 1px rule and lays .footer-content out as an
   auto-fit grid. Both are wrong here: the rule reads as a bright line on
   black, and the design wants a fixed two-column split rather than columns
   that appear and disappear with the viewport.

   Mobile-first: one column stacked. The desktop split and the three-column
   list live in functions.php, where the Customiser's breakpoint can be read.
   ========================================================================== */

/* The rule belongs to the content column, not the viewport, so it stops at
   contentSize rather than running edge to edge. The parent puts it on
   .site-footer, which is full-bleed. */
.site-footer {
    border-top: 0;
    padding-top: 0;
}

.footer-content {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--footer--border--colour);
    padding-top: 3rem;
}

.footer-identity__logo {
    margin-bottom: 3rem;
}

/* SVGs arrive carrying an inline width:100% from the parent's SVG filter, and
   the parent only neutralises it inside .site-branding. Without this the
   footer logo stretches to fill its column. !important is needed to beat the
   inline style, matching how the parent handles the header logo. */
.footer-identity__logo img {
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    max-height: var(--footer--logo--max-height);
}

/* <address> is italic by default; the design sets it as plain small print,
   matching the legal lines beneath. */
.footer-identity__address {
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    margin: 0 0 2rem;
}

.footer-identity__postal,
.footer-identity__phone {
    display: block;
}

.footer-identity__phone {
    margin-top: 1rem;
}

.footer-identity__address a {
    color: inherit;
    text-decoration: none;
}

.footer-identity__address a:hover,
.footer-identity__address a:focus {
    color: var(--wp--preset--color--cyan);
    text-decoration: underline;
}

.footer-legal__copyright,
.footer-legal__credit {
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--small);
    margin: 0 0 0.5rem;
}

.quantcore-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quantcore-footer-list__item {
    /* Stop an item splitting across a column boundary once the list is
       multi-column at desktop widths. */
    break-inside: avoid;
    margin-bottom: 0.75rem;
}

.quantcore-footer-list__item--social {
    margin-top: 0.5rem;
}
.quantcore-footer-social {
   display: flex;
   gap: 0.5rem;
}

.quantcore-footer-list__item--social a {
   height: 24px;
   width: 24px;
}

.footer-legal {
    margin-top: 2rem;
}

/* Footer links are white, not the site link colour. Cyan is kept for hover
   and focus so the states still read. */
.footer-links a {
    color: var(--wp--preset--color--white);
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--wp--preset--color--cyan);
}

/* The credit link is indistinguishable from the sentence around it at rest,
   per the design. Hover and focus bring back both colour and an underline so
   it is still discoverable by mouse and by keyboard. */
.footer-legal a {
    color: inherit;
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus {
    color: var(--wp--preset--color--cyan);
    text-decoration: underline;
}