/*
Theme Name: GP Developer Child Theme
Template: generatepress
Theme URI: https://addisonhalldesign.com
Author: Addison Hall
Author URI: https://addisonhalldesign.com
Description: This is a child theme for GeneratePress for use in jumpstarting more customized development.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

/*
CONTENTS:
1. Defaults
2. Header and Nav
3. Home Page
4. Content
5. Components
6. Widgets
7. Footer
8. Other & Tables
*/

/* ==========================================
=! 1. DEFAULTS
------------------------------------------ */
blockquote {
  font-size: 1em;
  font-style: normal;
  border-left: 5px solid rgba(28, 27, 27, 0.87);
}

.wp-block-pullquote {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-wrap: break-word;
}

.wp-block-pullquote p {
  font-size: 1.0625em;
  line-height: 1.6;
}

/* ==========================================
=! 2. HEADER AND NAV
------------------------------------------ */

/* ==========================================
=! 3. HOME PAGE
------------------------------------------ */

/* ==========================================
=! 4. CONTENT
------------------------------------------ */

/* ==========================================
=! 5. COMPONENTS
------------------------------------------ */
/* WordPress Native Responsive Galleries */
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
  max-width: 50%;
}

@media screen and (min-width: 640px) {
  .gallery-columns-3 .gallery-item,
  .gallery-columns-4 .gallery-item,
  .gallery-columns-5 .gallery-item,
  .gallery-columns-6 .gallery-item,
  .gallery-columns-7 .gallery-item,
  .gallery-columns-8 .gallery-item,
  .gallery-columns-9 .gallery-item {
    max-width: 33.33%;
  }
}

@media screen and (min-width: 992px) {
  .gallery-columns-4 .gallery-item { max-width: 25%; }
  .gallery-columns-5 .gallery-item { max-width: 20%; }
  .gallery-columns-6 .gallery-item { max-width: 16.66%; }
  .gallery-columns-7 .gallery-item { max-width: 14.28%; }
  .gallery-columns-8 .gallery-item { max-width: 12.5%; }
  .gallery-columns-9 .gallery-item { max-width: 11.11%; }
}

/* ==========================================================================
   ugbusiness.com - High-Impact Hover & Focus Underline Utility
   ========================================================================== */

/* 2. Base Utility Class for Links & Buttons */
.ug-hover-line {
  position: relative;
  text-decoration: none !important;
  display: inline-block;
  padding-bottom: 5px;
  
  /* Create line using a background linear-gradient */
  background-image: linear-gradient(var(--editorial-accent), var(--editorial-accent));
  background-position: 0 100%; /* Position at the bottom of the text */
  background-repeat: no-repeat;
  
  /* Initial State: Height of the line is 4px (thick), but width starts at 0% */
  background-size: 0% 4px; 
  
  /* Hardware-accelerated smooth sweep transition */
  transition: background-size 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Hover State: Expands width to 100% */
.ug-hover-line:hover,
.ug-hover-line:focus-visible {
  background-size: 100% 4px;
}

/* ==========================================================================
   ugbusiness.com - Scoped Icon Button Reset
   ========================================================================== */

/* Target ONLY icon utility buttons with ug-clean-btn */
button.ug-clean-btn,
a.ug-clean-btn {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 6px;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Ensure keyboard accessibility for icon buttons */
button.ug-clean-btn:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* Default browser/theme reset for standard <button> tags 
   WITHOUT overriding GenerateBlocks editor values */
.ug-site-header button:not(.ug-clean-btn) {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* ==========================================================================
   ugbusiness.com - Single Source of Truth: SVG Logo Sizing
   ========================================================================== */
/* ==========================================================================
   ugbusiness.com - Scaled SVG Brand Wordmark Sizing
   ========================================================================== */
/* ==========================================================================
   ugbusiness.com - Fixed FT-Style SVG Brand Wordmark Sizing
   ========================================================================== */

/* 1. Base Container Setup */
.ug-primary-centre .ug-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none;
  flex-shrink: 0; /* Ensures navigation items don't compress the logo */
}

/* 2. Desktop Base & Sticky State (Locked ~59px Height) */
.ug-primary-centre .ug-brand-logo svg,
.ug-site-header.gb-is-sticky .ug-primary-centre .ug-brand-logo svg {
  width: 300px; /* Yields ~58.8px height—bold, authoritative editorial presence */
  height: auto;
  aspect-ratio: 347.936 / 68.251;
  display: block;
  fill: currentColor;
  /* Smooth color transitions only—no dimensions transition to match FT behavior */
  transition: fill 0.3s ease;
}

/* Hover State */
.ug-primary-centre .ug-brand-logo:hover svg {
  fill: currentColor;
}

/* 3. Mobile State (Tablets & Phones < 767px) - Locked Scale */
@media (max-width: 767px) {
  .ug-primary-centre .ug-brand-logo svg,
  .ug-site-header.gb-is-sticky .ug-primary-centre .ug-brand-logo svg {
    width: 210px; /* Yields ~41.1px height on mobile viewports */
  }
}

/* 4. Ultra-Narrow Devices (< 360px) */
@media (max-width: 360px) {
  .ug-primary-centre .ug-brand-logo svg,
  .ug-site-header.gb-is-sticky .ug-primary-centre .ug-brand-logo svg {
    width: 175px; /* Fits tight viewports safely without horizontal scroll */
  }
}

/* 3. Keep SVG block-level so line-height wraps around it symmetrically */
.ug-primary-centre svg {
  display: block !important;
  margin: 0 auto;
}

/* ==========================================================================
   ugbusiness.com - Header Shape Line-Height Normalisation
   ========================================================================== */

.ug-site-header .gb-shape {
  line-height: 1.3 !important;
}
/* ==========================================
=! 6. WIDGETS
------------------------------------------ */

/* ==========================================
=! 7. FOOTER
------------------------------------------ */
/* Reserved for custom footer layout styles */

/* ==========================================
=! 8. OTHER & TABLES
------------------------------------------ */
/* Standard Data Tables */
table, .dcf-table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
}

td, th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px;
  border: none;
}

tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

table.striped>tbody>tr:nth-child(odd) {
  background-color: rgba(242, 242, 242, 0.5);
}

table.highlight>tbody>tr:hover {
  background-color: rgba(242, 242, 242, 0.5);
}

table.centered tbody tr td,
table.centered thead tr th {
  text-align: center;
}

/* DCF Custom Table Utility */
.dcf-table thead {
  background: #f1f1f1;
}

.dcf-table tbody {
  border-bottom: 1px solid #e3e3e2;
  border-top: 1px solid #e3e3e2;
  color: #000;
  line-height: 20px;
}

.dcf-table-bordered td,
.dcf-table-bordered th {
  border: 1px solid #f1f1f1;
  padding: 6px 12px;
}

/* Responsive Table Wrapper */
.dcf-wrapper-table-scroll {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1em;
  position: relative;
  right: 50%;
  width: 100vw;
}

/* ==========================================================================
   ugbusiness.com - Secondary Navigation Row (.ug-secondary-bar)
   ========================================================================== */
/* Mobile & Tablet Viewports (< 767px) */
@media (max-width: 767px) {
  .ug-secondary-bar {
    justify-content: flex-start; /* Aligns items to start for natural scroll padding */
    flex-wrap: nowrap;          /* Prevents categories from breaking onto row 2 */
    overflow-x: auto;           /* ENABLES HORIZONTAL SCROLL */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    scroll-snap-type: x mandatory;    /* Optional: crisp snap behavior on scroll */
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hide visible scrollbar for clean UI while keeping scroll functional */
  .ug-secondary-bar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  .ug-secondary-bar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Prevent menu items from shrinking when scrolling off-screen */
  .ug-secondary-bar > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   ugbusiness.com - Menu Item Hover Line Effect
   ========================================================================== */

/* 1. Establish relative positioning on the menu links */
.ug-secondary-bar .gb-menu-link {
  position: relative;
  text-decoration: none;
}

/* 2. Create the hover line pseudo-element */
.ug-secondary-bar .gb-menu-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: var(--editorial-accent); /* Or your primary accent colour */
  transition: width 0.25s ease-in-out;
}

/* 3. Expand line on hover/focus */
.ug-secondary-bar .gb-menu-link:hover::after,
.ug-secondary-bar .gb-menu-link:focus::after {
  width: 100%;
}

/* ==========================================================================
   ugbusiness.com - Header Layout & Sticky Collapse Mechanics
   ========================================================================== */

/* 1. Context-Aware Container Widths */
:root {
  --ug-header-expanded-width: 1440px;
  --ug-header-sticky-width: 1440px; /* Aligns with your 1800px container width */
}

/* Restrict sticky header width on single post reading views */
body.single-post {
  --ug-header-sticky-width: 1220px; /* Prevents sticky header from stretching wider than single article layout */
}

/* 2. Inner Container Shell */
.ug-site-header .ug-header-inner {
  max-width: var(--ug-header-expanded-width);
  margin-left: auto;
  margin-right: auto;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Row Transitions (Utility & Secondary Bars) */
.ug-site-header .ug-utility-bar {
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.ug-site-header .ug-primary-bar {
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ug-site-header .ug-secondary-bar {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.25s ease, 
              padding 0.35s ease;
}

/* ==========================================================================
   DESKTOP STICKY STATE (.gb-is-sticky)
   ========================================================================== */

.ug-site-header.gb-is-sticky {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Snap container width according to template variable */
.ug-site-header.gb-is-sticky .ug-header-inner {
  max-width: var(--ug-header-sticky-width);
}

/* Compress primary bar vertical space on scroll without touching logo size */
.ug-site-header.gb-is-sticky .ug-primary-bar {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Collapse utility bar and secondary category bar on scroll */
.ug-site-header.gb-is-sticky .ug-utility-bar,
.ug-site-header.gb-is-sticky .ug-secondary-bar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  pointer-events: none;
  overflow: hidden;
}

/* ==========================================================================
   MOBILE RESPONSIVE RULES (@media max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Secondary Bar horizontal scroll capability */
  .ug-site-header .ug-secondary-bar {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .ug-site-header .ug-secondary-bar::-webkit-scrollbar {
    display: none;
  }

  /* When sticky on mobile: Hide utility and secondary rows completely */
  .ug-site-header.gb-is-sticky .ug-utility-bar,
  .ug-site-header.gb-is-sticky .ug-secondary-bar {
    display: none;
  }
}

/* ==========================================================================
   ugbusiness.com - Header Utility Bar (.ug-utility-bar)
   ========================================================================== */

/* 2. Sign In Link Styling */
.ug-utility-bar .ug-utility-signin {
  text-decoration: none;
  padding-right: 16px;
  border-right: 1px solid var(--contrast-3, #cccccc); /* FT vertical divider pipe */
  transition: color 0.2s ease;
}

.ug-utility-bar .ug-utility-signin:hover {
  color: var(--accent, #005072);
}

/* 3. Subscribe Button Styling */
.ug-utility-bar .ug-utility-subscribe {
  transition: background-color 0.2s ease;
}

.ug-utility-bar .ug-utility-subscribe:hover {
  background-color: var(--accent, #005072);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE (< 767px)
   ========================================================================== */

@media (max-width: 767px) {
  /* Center utility items across mobile screens */
  .ug-site-header .ug-utility-bar {
    justify-content: center;
  }
}

/* 2. Display & Center on Mobile/Tablet (< 1024px) */
@media (max-width: 1024px) {
  .ug-site-header .ug-utility-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
  }
 }
/* ==========================================================================
   ugbusiness.com - Off-Canvas Accordion Override CSS
   ========================================================================== */

/* Hide drawer by default (high specificity override) */
#generate-slideout-menu .js-dropdown-target,
.slideout-navigation .js-dropdown-target {
    flex-direction: column !important;
    width: 100% !important;
display: none;
}

/* Force flex display when open */
#generate-slideout-menu .js-dropdown-target.is-open,
.slideout-navigation .js-dropdown-target.is-open {
    display: flex !important;
}

/* Row alignment for parent link + arrow button */
#generate-slideout-menu .js-accordion-header,
.slideout-navigation .js-accordion-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Chevron arrow smooth rotation transition */
.js-menu-toggle {
    display: inline-flex !important;
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.js-menu-toggle svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none; /* Passes click directly to .js-menu-toggle wrapper */
}

/* Flipped arrow state */
.js-menu-toggle.is-active {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   ugbusiness.com - FT Active Navigation Styling
   ========================================================================== */

/* 1. Base Active Container Highlight (Full Row + Toggle) */
#generate-slideout-menu .is-current-page {
padding-top: 8px;
padding-bottom: 8px;
}

/* 2. Text & SVG Color Inheritance */
#generate-slideout-menu .is-current-page a,
#generate-slideout-menu .is-current-page svg {
    color: var(--base-off-blue)!important;
}


/* 4. Ensure non-active sub-menu items stay clear */
#generate-slideout-menu .js-dropdown-target a:not(.is-current-page),
#generate-slideout-menu .js-dropdown-target .gb-container:not(.is-current-page) .gb-text {
    color: var(--contrast)!important;
}

/* Category / Post Term Links above headlines (Mixed-case / Sentence-case) */
.editorial-category-tag,
.entry-term-link {
  letter-spacing: -0.015em !important;
}

/* 2. Post Excerpts / Homepage Body Summary Text */
.homepage-body-text {
  letter-spacing: -0.02em !important;
}

button.slideout-exit  {color: #000;}

/* Target ONLY actual inline reading links inside article paragraphs */
.article-body p a {
    color: var(--contrast);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.article-body p a:hover {
    color: var(--contrast);
    text-decoration-thickness: 2px;
	text-decoration-line: none;
	box-shadow: inset 0 -.375em var(--editorial-accent);
}

/* ==========================================================================
   UG BUSINESS ARCHIVE TEMPLATE STYLES
   ========================================================================== */

.ugb-archive-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--editorial-accent);
    z-index: 1;
}

/* 3. Article Content & Meta Styling */
.ugb-archive-card .ugb-card-title {
    font-weight: 600;
    line-height: 1.15;
    color: var(--contrast);
    margin-bottom: 6px;
    text-decoration: none;
}

.ugb-archive-card .ugb-card-title a {
    color: var(--contrast);
    text-decoration: none;
}

.ugb-archive-card .ugb-card-title a:hover {
    color: var(--muted-meta);
}

.ugb-archive-card .ugb-card-excerpt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.45;
    color: var(--contrast);
    margin-bottom: 8px;
}

.ugb-archive-card .ugb-card-meta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase;
    color: var(--muted-meta);
    letter-spacing: -0.035em;
}

/* 4. Tab Switcher Styling */
.ugb-tab-wrapper {
    display: flex;
    align-items: center;
    background-color: #e8eae1;
    border-radius: 6px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 24px;
}

.ugb-tab-button {
    border: none;
    background: transparent;
    padding: 6px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted-meta);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ugb-tab-button.is-active {
    background-color: var(--surface-white);
    color: var(--contrast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ==========================================================================
   FLUID ARCHIVE CARDS (SUBSTACK / SF STANDARD STYLE)
   ========================================================================== */

.ugb-archive-card {
    display: flex;
    flex-direction: row;
    /* Uses clamp to natively scale the gap between image and text without media queries */
    gap: clamp(16px, 3vw, 32px); 
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-grey);
}
/* CONTENT CONTAINER WRAPPER */
.ugb-archive-card .ugb-card-content {
    flex: 1 1 auto; /* Takes up the remaining available space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centres the text beside the image */
}

/* ==========================================================================
   TAB SWITCHER COMPONENT (CORRECTED)
   ========================================================================== */

.ugb-tab-wrapper {
    display: flex;
    gap: 16px; 
    margin-bottom: 32px;
}

/* Base State: Inactive (Transparent & Default Text) */
.ugb-tab-button {
    background-color: transparent;
    color: inherit; /* Naturally uses your site's default body text colour */
    border: none;
    padding: 6px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px; 
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px; /* Very slight softening, no pill shape */
}

/* Hover State for Inactive */
.ugb-tab-button:hover {
    color: #1e293b; /* A sophisticated dark slate grey */
}

/* Active State: The Clicked Button */
.ugb-tab-button.is-active {
    background-color: #1e293b; /* Authoritative dark background, strictly not #000 */
    color: #ffffff; 
}

/* ==========================================================================
   FLUID THUMBNAIL WITH RESPONSIVE ASPECT RATIOS
   ========================================================================== */
.ugb-archive-card .ugb-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Increase the max width from 276px to 340px, and the percentage to 35% */
.ugb-archive-card .ugb-card-thumb {
    flex: 0 0 clamp(120px, 35%, 340px); 
    aspect-ratio: 1 / 1; 
    border-radius: 6px;
    overflow: hidden;
    background-color: transparent; 
}

@media (min-width: 768px) {
    .ugb-archive-card .ugb-card-thumb {
        /* Change from 3/2 for a slightly taller, more commanding rectangle on desktop */
        aspect-ratio: 7.9 / 5.3; 
    }
}


/* ==========================================================================
   SUB-CATEGORY NAVIGATION (THE TIMES ARCHIVE STYLE)
   ========================================================================== */

/* 1. Centre the navigation block */
.ugb-category-subnav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ugb-subnav-mobile-toggle {
    display: none; 
}

/* 2. Strip bullets and force a horizontal flex layout */
.ugb-subnav-list {
    display: flex;
    flex-wrap: nowrap; /* was wrap — this is what pushed items onto a second line */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox: slim scrollbar instead of the default chunky one */
    justify-content: flex-start; /* was center — centering fights with scrollable overflow, so items are left-aligned instead once they can scroll */
    list-style: none !important; /* Removes the bullet points */
    padding: 0;
    padding-bottom: 6px; /* room so the scrollbar doesn't sit under the active-item underline */
    margin: 0;
    gap: 12px; /* Space between the links */
}

/* 3. Reset list item margins, keep items from shrinking or wrapping */
.ugb-subnav-list li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 4. Style the links (typography and spacing) */
.ugb-subnav-list a {
    display: block;
    padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
    text-decoration: none;
    color: var(--base-off-black); /* Authoritative black text */
    /* System UI font stack for zero-bloat performance */
    font-family: var(--gp-font--plus-jarkata-sans); 
    font-size: 18px; 
    font-weight: 500;
	letter-spacing: -0.035em;
    position: relative;
    transition: color 0.2s ease;
}

/* 6. Active State: Bold text with the thick black top border */
.ugb-subnav-list li.is-active a {
    font-weight: 700;
}

.ugb-subnav-list li.is-active a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--editorial-accent); 
}


/* ==========================================================================
   SUB-CATEGORY NAVIGATION (DESKTOP & MOBILE DROPDOWN)
   ========================================================================== */

.ugb-subnav-mobile-toggle svg {
    transition: transform 0.3s ease;
}

.ugb-subnav-mobile-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   MOBILE BREAKPOINT (@media max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Make the navigation container sticky */
    .ugb-category-subnav {
        position: sticky;
        top: 0; /* Adjust this value if you have a sticky site header */
        z-index: 100;
        margin-bottom: 16px;
        margin-left: -16px; /* Negate the 16px master container padding */
        margin-right: -16px;
        width: calc(100% + 32px); /* Stretch to full viewport width */
    }

    /* Show the toggle button */
    .ugb-subnav-mobile-toggle {
        display: flex;
    }

    /* Hide the list by default on mobile, stack it vertically */
    .ugb-subnav-list {
        display: none; 
        flex-direction: column;
        background-color: #ffffff;
        border-bottom: 2px solid #004b79;
        border-top: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* When toggled open via JS */
    .ugb-subnav-list.is-open {
        display: flex;
    }

    .ugb-subnav-list a {
        padding: 14px 20px;
        border-bottom: 0px solid #f0f0f0;
    }

    /* Remove the desktop top-border indicator for the mobile view */
    .ugb-subnav-list li.is-active a::after {
        display: none;
    }
}

/* ==========================================================================
   DOM REORDERING (H1 vs Navigation)
   ========================================================================== */

/* Mobile: Nav above H1 */
@media (max-width: 767px) {
    .ugb-category-subnav { order: 1; }
    .ugb-mobile-header-reorder { order: 2; margin-top: 16px; }
}

/* Desktop/Tablet: Nav below H1 */
@media (min-width: 768px) {
    .ugb-mobile-header-reorder { order: 1; }
    .ugb-category-subnav { order: 2; }
}

/* ==========================================================================
   MOBILE BREAKPOINT (@media max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. Edge-to-edge container */
    .ugb-category-subnav {
        display: block;
		position: sticky;
        top: 0; /* Adjust to match your sticky header offset if needed */
        z-index: 100;
        margin-left: -16px; /* Pulls out of the master container padding */
        margin-right: -16px;
        width: 100vw; /* Force viewport width */
        background-color: #ffffff;
    }

    /* 2. The Blue Toggle Bar */
    .ugb-subnav-mobile-toggle {
        display: flex;
        width: 100%;
        background-color: #006b99; /* The authoritative teal-blue */
        color: #ffffff;
        border: none;
        padding: 16px 20px;
        font-family: var(--gp-font--plus-jarkata-sans);
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
    }

    .ugb-toggle-text {
        text-align: left;
    }

    /* 3. The Circular White Icon */
    .ugb-toggle-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        color: #006b99; /* Icon matches the bar colour */
        width: 32px;
        height: 32px;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    /* Rotate icon when expanded */
    .ugb-subnav-mobile-toggle[aria-expanded="true"] .ugb-toggle-icon {
        transform: rotate(180deg);
    }

    /* 4. The Full-Width Dropdown List */
    .ugb-subnav-list {
        display: none; 
        flex-direction: column;
        width: 100%;
        background-color: #ffffff;
        border-bottom: 1px solid #e5e5e5;
    }

    .ugb-subnav-list.is-open {
        display: flex;
    }

    /* Full-width list items */
    .ugb-subnav-list li {
        width: 100%;
    }

    .ugb-subnav-list a {
        display: block;
        width: 100%;
        padding: 18px 20px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 17px;
        text-align: left;
        color: #000000;
    }

    /* Strip desktop border rules */
    .ugb-subnav-list li.is-active a::before {
        display: none;
    }
}

/* Force a and p tags to behave */
.obey-me a {
    color: #1a1a1a;
}

.please-behave a {
margin-bottom: 0px !important;
margin-top: -4px;
color: var(--editorial-accent-2) !important;
padding-top: 0.5px;
padding-right: 0.5px;
padding-bottom: 0.5px;
padding-left: 0.5px;
font-size: 15px;
font-weight: 700;
font-family: var(--gp-font--plus-jarkata-sans);
text-transform: uppercase;
}

/* Desktop & Tablet: Vertical borders between the 4 columns */
@media (min-width: 768px) {
    .ugb-archivet2-card-grid > .gb-loop-item {
        border-right: 1px solid var(--border-neutral);
        padding-right: 10px;
        margin-bottom: 15px;
    }
    /* Remove the border from the very last card in each row so it doesn't double up */
    .ugb-archivet2-card-grid > .gb-loop-item:nth-child(4n) {
        border-right: none;
        padding-right: 10px;
    }
    .ugb-archivet2-card-grid > .gb-loop-item:nth-child(4n+1) {
        padding-left: 0;
    }
}

/* Mobile (<767px): Stacked view with top/bottom borders instead of side borders */
@media (max-width: 767px) {
    .ugb-archivet2-card-grid > .gb-loop-item {
        border-bottom: 1px dashed var(--border-neutral);
        padding-bottom: 0px;
        margin-bottom: 10px;
		margin-top: 10px;
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* On mobile screens (<767px), hide the image for cards 2, 3, and 4 */
@media (max-width: 767px) {
    .ugb-archivet2-card-grid > .gb-loop-item:nth-child(n+2) .ugb-archivet2-mobile-hide-image {
        display: none;
    }
}

/*Remove border from last in each column*/
@media (max-width: 767px) {
    .ugb-archivet2-card-grid > .gb-loop-item:last-child {
        border-bottom: none;
    }
}

/* 
 * ugbusiness.com - Top Editorial Grid 
 * Forces the first article to span 2 columns and 2 rows.
 * The media query ensures this applies to both tablet (768px+) and desktop,
 * while allowing mobile screens to natively collapse into a single column.
 */
@media (min-width: 768px) {
    .ugb-editorial-top-grid-tags > :first-child {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
}

/* 
 * ugbusiness.com - Hide Excerpts on Secondary Cards
 * Targets all items after the lead story and removes their excerpt from the DOM flow.
 */
.ugb-editorial-top-looper > :not(:first-child) .ugb-lead-excerpt-only {
    display: none;
}

.ugb-editorial-top-looper > :not(:first-child) .ugb-headline-text-secondary {
    font-size: 25px;
}

/* 
 * ugbusiness.com - Mathematical Dotted Grid Borders
 * Assumes a 24px Grid Gap. (If gap is 20px, change -12px to -10px).
 */

/* 1. Slice off the overhang */
.ugb-editorial-top-looper {
    /* Because our borders get pushed into the gaps, the ones on the 
       extreme right and bottom will overflow the container. 
       This cleanly slices them off across all screen sizes automatically. */
    overflow: hidden; 
}

/* 2. Anchor the lines to the cards */
.ugb-editorial-top-looper > .gb-loop-item {
    position: relative; /* Required for absolute pseudo-elements to stick to the card */
}

/* 3. The Vertical Separators */
.ugb-editorial-top-looper > .gb-loop-item::after {
    content: "";
    position: absolute;
    right: -10px; /* Pushed exactly halfway into the 24px column gap */
    top: 0;
    bottom: 0;
    border-right: 1px solid var(--border-neutral); /* Adjust hex/thickness to match your desired Times grey */
    pointer-events: none;
}

/* 4. The Horizontal Separators */
.ugb-editorial-top-looper > .gb-loop-item::before {
    content: "";
    position: absolute;
    bottom: -10px; /* Pushed exactly halfway into the 24px row gap */
    left: 0;
    right: 0;
    border-bottom: 1px dashed var(--border-neutral);
    pointer-events: none;
}

/* 
 * ugbusiness.com - 'More Economics' List Clean-up
 * Removes the bottom border and padding from the final item in the list 
 * so it sits perfectly flush with whatever follows it.
 */
.ugb-more-list-looper > .gb-loop-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 
 * ugbusiness.com - 'The Times' Style Pagination
 * Minimalist, borderless design with a grey active state.
 */

/* 1. Base styling for all pagination links and numbers */
.archive-temp-page-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Creates consistent square click targets */
    height: 20px;
    padding: 20px !important;
    margin: 0 4px; /* Clean spacing between numbers */
    font-size: 17px !important;
    color: #transparent !important;
    background-color: transparent !important; /* Overrides default background */
    border: none !important; /* Removes the boxy borders */
    text-decoration: none;
    transition: background-color 0.2s ease;
	border-radius: 6px;
	font-family: var(--gp-font--plus-jarkata-sans);
}

/* 2. Hover state for inactive numbers */
.gb-query-page-numbers-1bfd669c .page-numbers:hover:not(.current):not(.dots) {
    background-color: #f5f5f5; /* Very subtle hover feedback */
}

/* 3. The Active/Current Page (The Times Grey) */
.archive-temp-page-numbers .page-numbers.current {
    background-color: #fff !important; /* Matches The Times' solid grey */
    font-weight: 600 !important;
    pointer-events: none !important; /* Prevents reloading the current page */
}

/* 4. Formatting the ellipsis (...) */
.gb-query-page-numbers-1bfd669c .page-numbers.dots {
    min-width: auto;
    pointer-events: none;
}

/* homepage before opinion H1s */
.ugb-opinion-quote a::before, .ugb-opinion-quote .gb-headline-text::before {
	content: "\201C";
	color: #0f5499;
	margin-right: 4px;
	font-family: inherit;
	display: inline-block;
}

/* ==========================================================================
   FT-STYLE NON-INTERSECTING GRID LINES
   GenerateBlocks 2.x — Query Loop "Looper" (.ugb-article-grid-lines)
   Loop Items: .gb-loop-item
   ========================================================================== */

:root {
	--ugb-grid-line-color: var(--border-neutral); /* FT uses near-black; adjust to brand */
	--ugb-grid-gap: 10px;
}

/* Loop Item must be a positioning context, and must NOT clip its pseudo-elements */
.ugb-article-grid-lines .gb-loop-item {
	position: relative;
	overflow: visible; /* critical — if GB Pro added overflow:hidden for the hover/shadow style, this breaks the lines */
}

/* --------------------------------------------------------------------------
   VERTICAL SEPARATORS (desktop, 3-col)
   Applied to every item EXCEPT the 3rd column (nth-child(3n)) — Rule 3.
   Uses :not(:nth-child(3n)) instead of hardcoding item 1–6, so it still
   works correctly if the loop count ever changes to a multiple of 3.
   -------------------------------------------------------------------------- */
.ugb-article-grid-lines .gb-loop-item:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;              /* bounded to the item's own height — NEVER extends into the row-gap */
	right: -5.5px;          /* centers a 1px line inside the 10px column-gap: (10/2) - (1/2) */
	width: 1px;
	background-color: var(--border-neutral); /* background-color, not border, avoids subpixel/antialiasing artifacts */
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   HORIZONTAL SEPARATORS (desktop, 3-col → 2 rows for 6 items)
   Applied to every item that is NOT in the final row.
   :not(:nth-last-child(-n+3)) always selects "everything except the last
   3 items" — i.e. the last row — regardless of total count, as long as
   the total is a multiple of 3. This is more robust than nth-child(-n+3),
   which only works if you know the exact total in advance.
   -------------------------------------------------------------------------- */
.ugb-article-grid-lines .gb-loop-item:not(:nth-last-child(-n+3))::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;               /* bounded to the item's own width — NEVER extends into the column-gap */
	bottom: -5.5px;         /* centers a 1px line inside the 10px row-gap */
	height: 1px;
	background-color: var(--border-neutral);
	pointer-events: none;
}

/* ==========================================================================
   MOBILE (≤767px) — single column, horizontal separators only
   ========================================================================== */
@media (max-width: 767px) {

	/* Kill the vertical lines entirely — no columns to separate on mobile */
	.ugb-article-grid-lines .gb-loop-item::after {
		content: none;
	}

	/* Re-target ::before: every item except the actual last item gets a
	   horizontal rule. Since it's 1 column, "last row" and "last item"
	   are the same thing, so the selector simplifies to :not(:last-child). */
	.ugb-article-grid-lines .gb-loop-item:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -5.5px;      /* still centers in the 10px row-gap — adjust if mobile row-gap differs */
		height: 1px;
		background-color: var(--border-neutral);
	}

	/* If your Looper's row-gap changes on mobile (e.g. down to 16px for
	   readability), update the bottom offset to match: -(gap/2 + 0.5px) */
}

/* Consistent gutter between headline text and the vertical separator lines */
.ugb-article-grid-lines .gb-loop-item {
	padding-right: 20px; /* space before the line on the right */
	padding-left: 20px;  /* space after the line on the left */
	box-sizing: border-box;
}

/* Column 1 (first in each row) doesn't need left padding — it's flush with the grid edge */
.ugb-article-grid-lines .gb-loop-item:nth-child(3n+1) {
	padding-left: 0;
}

/* Column 3 (last in each row) doesn't need right padding — no line to clear, flush with grid edge */
.ugb-article-grid-lines .gb-loop-item:nth-child(3n) {
	padding-right: 0;
}

.ugb-desktop-sticky-header-categories .gb-menu-item .gb-menu-link {
	padding: 5px;
}

.ugb-desktop-sticky-header-categories .gb-menu-link:hover {
border-bottom: 5px;
	border-bottom-color: var(--editorial-accent);
	border-bottom-style: solid;
}

/* ==========================================================================
   ugbusiness.com - Category Sticky Header
   ========================================================================== */
.ugb-desktop-sticky-header-categories {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); 
}

.archive-template-two-top-stories-grid-no-border:last-child {
	border-bottom: none;
}

h1, h2, h3, h4, h5, h6 {
    font-optical-sizing: auto;
}

.homepage-template-h2 {
	font-size: 24px;
}

h2.homepage-secondary-lead-h2 {
	font-size: 26px;
}

h2.homepage-tertiary-lead-h2 {
	font-size: 22px;
}

.homepage-subsection-lead-h2 {
	font-size: 33px;
}

.homepage-section-lead-h2 {
	font-size: 36px;
}

.homepage-most-popular.homepage-tertiary-lead-h2::marker {
	font-size: 24px;
	font-family: var(--gp-font--libre-caslon);
	font-weight: 700;
	color: var(--muted-meta);
}

.homepage-most-popular a {
	font-size: 20px;
	font-weight: 600;
	font-family: var(--gp-font--libre-caslon);
	letter-spacing: -0.025em;
}

.popular-post-list-home.gb-loop-item:first-child {
	border-bottom: 0;
}

/* 1. Structural Anchor (Applies globally) */
.homepage-markets-section-loop-items > * {
    position: relative;
}

/* 2. Tablet & Desktop Execution (Screens 768px and wider) */
@media (min-width: 768px) {
    .homepage-markets-section-loop-items > *:nth-child(odd)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px; /* Suspends the line exactly halfway into the 20px gap */
        bottom: 0; 
        border-right: 1px solid var(--border-neutral); /* Adjust hex as needed */
    }
}

/* 3. Mobile Failsafe (Explicitly destroys the line on screens 767px and smaller) */
@media (max-width: 767px) {
    .homepage-markets-section-loop-items > *::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 767px) {
.homepage-markets-section-loop.gb-loop-item:last-child {
	border-bottom: 0px;
	margin-bottom: 0px;
}
}

@media (max-width: 767px) {
.homepage-politics-section-loop.gb-loop-item:last-child {
	border-bottom: 0px;
	margin-bottom: 0px;
}
}

/* 1. Structural Anchor (Applies globally to establish positioning context) */
.homepage-politics-section-loop > * {
    position: relative;
}

/* 2. Tablet & Desktop Execution (Leaves mobile untouched) */
@media (min-width: 768px) {
    /* Draw the line on every item EXCEPT the 4th item in every row */
    .homepage-politics-section-loop > *:not(:nth-child(4n))::after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px; /* Pushes the line exactly halfway into a 20px gap */
        bottom: 0; 
        border-right: 1px solid var(--border-neutral); /* Ensure this hex matches your palette */
    }
}

/* Hide the menu by default and set up a smooth transition */
.edition-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
    min-width: 125px; /* Adjust based on your typography */
}

/* Reveal the menu when the JavaScript adds the is-open class */
.edition-dropdown-wrapper.is-open .edition-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Optional: Retain the signature red color state when open */
.edition-dropdown-wrapper.is-open .edition-toggle {
    color: var(--editorial-accent-2); 
}

.dynamic-header .gb-menu-item-mi5d0d61 .gb-menu-link {
	padding: 10px;
}

/* 1. Isolate the Sticky State to the Top Bar */
.sticky-top-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    /* Optional: Adds a subtle border when scrolling to separate from body content */
    border-bottom: 1px solid transparent; 
    transition: border-bottom 0.3s ease;
}

body.is-scrolled .sticky-top-bar {
    border-bottom: 1px solid #e5e5e5;
	background-color: var(--subtle-grey) !important;
	height: 60px;
}

/* 2. Hide and position the Top Bar Menu by default */
.top-bar-center-nav {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.top-bar-mini-logo-top {
    opacity: 0;
    visibility: hidden;
}

body.is-scrolled .top-bar-mini-logo-top {
    opacity: 1;
    visibility: visible;
}

/* 3. Reveal the Top Bar Menu on scroll */
body.is-scrolled .top-bar-center-nav {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.slideout-toogle-menu-items a {
	font-weight: 600!important;
	color: var(--contrast)
}

/* Off-Canvas Search Form Container */
.ugb-search-form {
  width: 100%;
  margin-bottom: 24px;
}

/* Flexbox Box Wrapper */
.ugb-search-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db; /* Light gray outline */
  background-color: #ffffff;
  padding: 12px 16px;
  transition: border-color 0.2s ease;
}

/* Focus state for subtle interaction feedback */
.ugb-search-wrapper:focus-within {
  border-color: #111111;
}

/* Native Input Field Reset & Style */
.ugb-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  padding: 0 !important;
  margin: 0 !important;
}

.ugb-search-input::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* Remove WebKit/Blink default cancel button styling if desired */
.ugb-search-input::-webkit-search-decoration,
.ugb-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Inline SVG Submit Button */
.ugb-search-submit {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0 12px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

.ugb-search-submit:hover,
.ugb-search-submit:focus {
  color: #111111;
}

/* Base mobile width */
.main-navigation.offside {
  --gp-slideout-width: 300px;
}

/* Tablet & Desktop width */
@media (min-width: 768px) {
  .main-navigation.offside {
    --gp-slideout-width: 330px;
  }
}