/* =============================================================================================
   DESKTOP OVERRIDES MODULE  - This page overrides the mobile first styles in sheets 1 and 2
   The top section styles are global styles for all desktop page header/footer/content areas
   After that there is a second level of overrides for the content areas in individual pages
   ============================================================================================= */


/* =============================================================================== */   
/* --- PART A:  GLOBAL SETTINGS - ALL PAGES --- */
/* =============================================================================== */

body {
    background-color: #f6f6f6;
}

html {
    font-size: 100% !important; 
}

#wcp-header {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 5px solid #dedede;
    padding-top: 4rem; 
    padding-bottom: 1.5rem;
}

#wcp-structural-canvas {
    display: block;
    max-width: 78rem; 
    margin: 0 auto; 
    background-color: #ffffff; 
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 4rem;
}

#wcp-inner-rail {
    padding: 2.5rem 3rem 4rem 3rem;
    box-sizing: border-box;
    width: 100%;
}

#wcp-colophon {
    background-color: #4a4a4a;
    color: #ffffff;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Global Uniform Uppercase Page Headings */
#wcp-structural-canvas h1.wcp-page-title,
#wcp-structural-canvas h1.wcp-archive-title,
#wcp-structural-canvas .wcp-page-header h1.wcp-page-title {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}



/*  =============== /PART A: GLOBAL SETTINGS ======================== */



/* ================================================================= */
/* --- PART B: HEADER SECTION INCL SPLIT-LINE BRANDING SETTINGS --- */
/* ================================================================= */

#wcp-header-content {
    max-width: 78rem;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

/* ==========================================================================
   DESKTOP ONLY UTILITY POSITIONING
   This file only loads on screen sizes 981px and wider
   ========================================================================== */

/* ==========================================================================
   DESKTOP ONLY UTILITY & DARK OVERRIDES (min-width: 981px)
   ========================================================================== */

/* ==========================================================================
   DESKTOP ONLY UTILITY & ROOT OVERRIDES (min-width: 981px)
   ========================================================================== */

/* ==========================================================================
   DESKTOP ONLY UTILITY & ROOT OVERRIDES (min-width: 981px)
   ========================================================================== */

/* 1. BUTTON VISIBILITY & CACHE-PROOF TEXT STRINGS */
.wcp-theme-logo-anchor {
    display: block !important;
    margin-bottom: 8px;
    padding-left: 2px;
}

#wp-theme-toggle {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #666666;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.2s ease;
}

#wp-theme-toggle:hover {
    color: #111111;
}

/* Default state string (Light Mode) */
#wp-theme-toggle::before {
    content: "🌙 DARK MODE" !important;
}

/* Active state string (Dark Mode) */
html.manual-dark-mode #wp-theme-toggle::before {
    content: "☀️ BRIGHT MODE" !important;
}


/* 2. LOW-CONTRAST DIMMER CANVAS (Targets root HTML class name) */
html.manual-dark-mode body, 
html.manual-dark-mode #wcp-structural-canvas,
html.manual-dark-mode .has-white-background-color {
    background-color: #1a1a1a !important;
    color: #d1d1d1 !important;
}


/* 3. PRIMARY TYPOGRAPHY ADJUSTMENTS */
html.manual-dark-mode #wcp-structural-canvas p,
html.manual-dark-mode #wcp-structural-canvas .wcp-entry-content p,
html.manual-dark-mode #wcp-structural-canvas .wp-block-post-excerpt p,
html.manual-dark-mode #wcp-structural-canvas .wp-block-post-excerpt__excerpt {
    color: #cccccc !important;
}


/* 4. ARTICLE & ARCHIVE TITLES LAYOUT */
html.manual-dark-mode #wcp-structural-canvas h1.wcp-page-title,
html.manual-dark-mode #wcp-structural-canvas h1.wcp-archive-title,
html.manual-dark-mode #wcp-structural-canvas h2.wp-block-post-title a,
html.manual-dark-mode #wcp-structural-canvas h2.wcp-archive-title a {
    color: #e5e5e5 !important;
}

html.manual-dark-mode #wcp-structural-canvas h2.wp-block-post-title a:hover,
html.manual-dark-mode #wcp-structural-canvas h2.wcp-archive-title a:hover {
    color: #ffffff !important;
}


/* 5. METADATA TRACKING LINES */
html.manual-dark-mode #wcp-structural-canvas .wp-block-post-date,
html.manual-dark-mode #wcp-structural-canvas .wcp-archive-meta,
html.manual-dark-mode #wcp-structural-canvas .wcp-taxonomy-track,
html.manual-dark-mode #wcp-structural-canvas .wcp-cpt-label {
    color: #888888 !important;
}


/* 6. STRUCTURAL SEPARATORS & BORDERS */
html.manual-dark-mode #wcp-structural-canvas hr,
html.manual-dark-mode #wcp-structural-canvas .wp-block-separator,
html.manual-dark-mode #wcp-structural-canvas h2.wp-block-heading {
    border-color: #2e2e2e !important;
}


/* 7. BUTTON COLOR ADJUSTMENT WHEN DARK MODE IS ACTIVE */
html.manual-dark-mode #wp-theme-toggle {
    color: #aaaaaa;
}
html.manual-dark-mode #wp-theme-toggle:hover {
    color: #ffffff;
}


/* 8. MEDIA ASSET GRAPHICS SOFTENERS */
html.manual-dark-mode #wcp-structural-canvas img {
    filter: brightness(0.85) contrast(1.05) !important;
}
html.manual-dark-mode #wcp-structural-canvas figure.wcp-img-size img,
html.manual-dark-mode #wcp-structural-canvas .wcp-archive-thumbnail img {
    filter: grayscale(100%) brightness(0.8) !important;
}



#wcp-logo-block,
#wcp-search-block,
.wcp-tabmenu {
    box-sizing: border-box;
}

#wcp-logo-block {
    display: block;
    margin-bottom: 0;
    text-align: left;
    background-position: left center;
    background-size: auto auto; 
    padding-left: 3.35rem; 
    min-height: 4.5rem;
}

/* Line 1 Title String Layout Rules */
#wcp-logo-block .wcp-desktop-title {
    font-size: 2.8rem !important; 
    font-weight: 300 !important;
    line-height: 1.1 !important;
    color: #222222 !important; 
    margin-top: 0 !important;      
    margin-bottom: 0.2rem !important; 
}

/* Line 2 Tagline String Layout Rules */
#wcp-logo-block .wcp-desktop-tagline {
    font-size: 2.4rem !important; 
    font-weight: 300 !important;
    line-height: 1.1 !important;
    color: #888888 !important; 
    margin-top: 0 !important;      
    margin-bottom: 0 !important;   
    display: block;
}


/* --- 3. SEARCH CONTAINER REALIGNMENT --- */
#wcp-search-block {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    width: auto !important; /* Changed from 100% to let flex align it */
    max-width: none !important; /* Removes the 18rem constraint that was pulling it off-center */
}

#wcp-search-block .wcp-search-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* --- 4. NAVIGATION ELEMENT CONTROLS (ZERO TWITCH) --- */
.wcp-tabmenu {
    width: 100%;
    margin-top: 2.5rem;
}

.wcp-tabmenu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.4rem; /* Updated from 1.15rem to fill the row length gap */
}

.wcp-tabmenu ul li {
    margin: 0 -4px 0 0;
    display: inline-block;
}

.wcp-tabmenu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 1.3rem !important; /* Updated from 1.0rem to match layout density */
    font-weight:500!important;
    text-transform: uppercase;
    display: inline-block;
    background-color: transparent; 
    transition: background-color 0.1s ease;
}

.wcp-tabmenu ul li a:hover {
    background-color: #f0f0f0; 
}

/* ======================== / END PART B: HEADER AND BRANDING =========== */


/* ================================================================ */
/* ===================PART C: COLOPHON (FOOTER) TUNING ============ */
/* ================================================================ */
        
#wcp-footer-links {
    display: block;             /* Changed from flex to block */
    max-width: 78rem;           /* Sets the exact width ceiling of your main content card */
    margin: 0 auto;             /* Centers this constraint box on the screen */
   /* padding: 0 3rem; */            /* Restores the precise 3rem side margins used by your content rail */
    text-align: left;           /* Forces all link rows to line up cleanly against the left margin */
}


#wcp-footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0 !important;      /* Clears default browser list spacing */
    text-align: left;           /* Forces the text lines to stay left-aligned */
}

#wcp-footer-links a {
    font-size: 1.3rem !important; /* FIXED: Increases text size cleanly to ~18px */
    line-height: 1.6 !important;
    color:#ffffff!important;
    text-decoration:none!important;

}


#wcp-copyright {
    max-width: 78rem;           /* Limits the line length to match your main content card */
    margin: 0 auto;             /* Centers the tracking box on the screen */
    padding: 1.5rem 0rem 0 0cm; /* Adds the top spacing and sets matching 3rem side margins */
    border-top: 1px solid #666;
    text-align: left;           /* Left-aligns the copyright string text */
}

/* ==== /END FOOTER TUNING SETTINGS ======== */


/* ================================================================================ */
/* ==== /END GLOBAL DESKTOP SETTINGS ======== */
/* ================================================================================ */



/* ================================================================================ */

/* +++++++++++++++++++++++   INDIVIDUAL PAGE FIXES ++++++++++++++++++++++++++++++++ */

/* ================================================================================= */


/* ==========================================================================
   #1 HOMEPAGE TEMPLATE OVERRIDES (page-home.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
    Latest Articles Feed block Layout at page bottom
   -------------------------------------------------------------------------- */

/* Master Row Layout: Sets the 100px image lane and right text lane */
#wcp-structural-canvas .wcp-view-home .wp-block-post {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    column-gap: 2.5rem !important;
    row-gap: 0.25rem !important;
    margin-bottom: 0.5rem !important; /* Calibrated vertical spacer gap between article rows */
    list-style-type: none !important;
    align-items: start !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pins the square image box cleanly into column 1 */
#wcp-structural-canvas .wcp-view-home figure.wcp-img-size {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* Forces the hard 100px square crop and pure high-contrast black & white */
figure.wcp-img-size img {
    width: 100px !important;
    max-width: 100% !important;
    height: 100px !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    display: block !important;
    filter: grayscale(100%) !important; 
}

/* Aligns date, title, and excerpt boxes into column 2 */
#wcp-structural-canvas .wcp-view-home .wp-block-post-date,
#wcp-structural-canvas .wcp-view-home h2.wp-block-post-title,
#wcp-structural-canvas .wcp-view-home .wp-block-post-excerpt {
    grid-column: 2 !important;
    margin-left: 0 !important;
}


/* Eye-calibrated typography for post title */
#wcp-structural-canvas .wcp-view-home h2.wp-block-post-title a {
    font-size: 1.40rem !important; 
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
    color:#888888 !important;
    
}

/* Eye-calibrated typography for post title link hover */
#wcp-structural-canvas .wcp-view-home h2.wp-block-post-title a:hover {
    font-size: 1.40rem !important; 
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
    color:#222222 !important;
    
}

/* Eye-calibrated typography for summary excerpts */
#wcp-structural-canvas .wcp-view-home .wp-block-post-excerpt p,
#wcp-structural-canvas .wcp-view-home .wp-block-post-excerpt__excerpt {
    font-size: 1.0rem !important; 
    line-height: 1.55 !important; 
    font-weight: 400 !important;
    color: #444444 !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Intro Content & hero Image 
   -------------------------------------------------------------------------- */

/* Resets the main layout wrapper to flow downward naturally */
#wcp-structural-canvas .wcp-view-home .wcp-entry-content {
    display: block !important;
    width: 100% !important;
}

/* Locks intro paragraph and main image block to the reading lane width */
#wcp-structural-canvas .wcp-view-home .wcp-entry-content > p,
#wcp-structural-canvas .wcp-view-home .wcp-entry-content > .wp-block-image {
    max-width: 85% !important;      
    margin-left: 0 !important;      
    margin-right: auto !important;     
}

/* Scales the main intro photo flush inside its lane bounds */
#wcp-structural-canvas .wcp-view-home .wcp-entry-content .wp-block-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 2.5rem 0 !important;
}

/* Strips native WordPress alignment offsets from stream headers */
#wcp-structural-canvas .wcp-view-home .wcp-entry-content > h2,
#wcp-structural-canvas .wcp-view-home .wcp-entry-content > hr {
    max-width: 100% !important;
    padding-left: 0 !important;     
    padding-right: 3rem !important;
    box-sizing: border-box !important;
}

/* Pushes text and feed components evenly away from outer window edge */
#wcp-structural-canvas .wcp-view-home .wcp-entry-content > .wp-block-post-template {
    max-width: 100% !important;
    padding-left: 0 !important;     
    padding-right: 3rem !important;
    margin-left: 0 !important;         
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Site News - Two-Column 
   -------------------------------------------------------------------------- */

/* Formats the "Site news" header  */
#wcp-structural-canvas .wcp-view-home .wp-block-group__inner-container h2.wp-block-heading {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0 !important;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    box-sizing: border-box !important;
}

/* Erases all native line borders from site news table */
#wcp-structural-canvas .wcp-view-home .wp-block-table.news-table table,
#wcp-structural-canvas .wcp-view-home .wp-block-table.news-table tr,
#wcp-structural-canvas .wcp-view-home .wp-block-table.news-table td {
    border: none !important;             
    background: transparent !important;   
}

/* Locks the news date lane width precisely */
#wcp-structural-canvas .wcp-view-home .wp-block-table.news-table td:first-child {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    padding: 0.5rem 0 !important; 
    color: #888888 !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    vertical-align: baseline !important;
}

/* Expands the right news content lane and adds typography spacing gap */
#wcp-structural-canvas .wcp-view-home .wp-block-table.news-table td:last-child {
    padding: 0.5rem 3rem 0.5rem 2rem !important; 
    font-size: 1.35rem !important;
    line-height: 1.5 !important;
    color: #222222 !important;
    vertical-align: baseline !important;
}


/* Standardizes alternative Gutenberg flex column layouts */
#wcp-structural-canvas .wcp-view-home .wp-block-columns.is-layout-flex {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    box-sizing: border-box !important;
    margin-bottom: 2rem !important;
}

/* Enforces the exact 120px left baseline track constraint on custom news rows */
#wcp-structural-canvas .wcp-view-home .news-data-row {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    flex-basis: 120px !important;
}

/* ========================= / END HOME PAGE ========================== */
/* ====================================================================



/* ======================================================================= */
/* --- #2 Projects Gallery Page (`page-projects.php`) ---                  */
/* ======================================================================= */

#wcp-structural-canvas .wcp-view-projects .wcp-entry-content {
    width: 100%;
}

/* 1. Formats the main gallery container block row */
#wcp-structural-canvas .wcp-view-projects .wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 3rem 0 !important;
    padding: 0 !important;
    gap: 1.5rem !important; 
}

/* 2. Sets up your white matted frames with the thin grey border line */
#wcp-structural-canvas .wcp-view-projects .wp-block-gallery .wp-block-image {
    flex: 0 0 calc(25% - 1.125rem) !important;
    width: calc(25% - 1.125rem) !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: #ffffff;
    border: 1px solid #eaeaea; 
    padding: 0.5rem !important; /* Generates your miniature white matting space */
    box-sizing: border-box !important;
    display: block !important; /* Resets container to standard block flow layout */
}

/* 3. Resets the image link anchor to run raw inside the frame track */
#wcp-structural-canvas .wcp-view-projects .wp-block-gallery .wp-block-image > a {
    display: block !important;
    position: static !important; /* Strips positioning hacks */
    width: 100% !important;
    height: auto !important;
    margin: 0 0 0.5rem 0 !important; /* Generates a clean gap directly beneath the photo */
}

/* 4. Scales the images smoothly inside the frame boundaries */
/* Squeezes images to fill their grid boxes completely and forces a square crop */
#wcp-structural-canvas .wcp-view-projects .wp-block-gallery .wp-block-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;         /* Ensure height runs fluidly */
    aspect-ratio: 1 / 1 !important;  /* RETROFIT: Forces any asset into a perfect square layout block */
    object-fit: cover !important;    /* Center-crops any portrait or landscape photo dynamically */
    margin: 0 !important;
}


/* 5. Formats the text strings cleanly beneath the photo as raw editorial copy */
#wcp-structural-canvas .wcp-view-projects .wp-block-gallery .wp-element-caption {
    display: block !important;
    position: static !important; /* Strips absolute positioning loops completely */
    width: 100% !important;
    background: transparent !important; /* DROPPED: Removes the dark background block entirely */
    color: #333333 !important; /* Changes font to crisp charcoal matching your site text */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 0.25rem 0 0.5rem 0 !important; /* Spaces text inside the frame matting */
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 6A Place page title */
#wcp-structural-canvas .wcp-view-projects h1.wcp-page-title, #wcp-structural-canvas .wcp-view-projects h2.wp-block-heading {
    font-size: 2.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;

}


/* 6B. Section title  */
#wcp-structural-canvas .wcp-view-projects h2.wp-block-heading {
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    width: 100%;
}

/* 7. Para text */
#wcp-structural-canvas .wcp-view-projects .wcp-entry-content p {

font-size: 1.6rem !important;

}

/* Desaturate imgs by default to weak colour, resaturate to 100% on rollowver */
#wcp-structural-canvas figure img, .wp-block-image a img,
#wcp-structural-canvas .wp-block-post img {
    filter: saturate(30%) !important;
    transition: filter 0.25s ease-in-out !important;
}


#wcp-structural-canvas figure img:hover, .wp-block-image a img:hover,
#wcp-structural-canvas .wp-block-post img:hover {
    filter: saturate(100%) !important;
}

/* /end  sATURATE/desaturate */

/* ================================================================== */
/* ==================== / end project gallery page styles  ================   */ 
/* ================================================================== */


/* ==================================================================== */
/* --- #3 Places Gallery page (`page-places.php`) --- */
/* ==================================================================== */ 


#wcp-structural-canvas .wcp-view-places .wcp-entry-content {
    width: 100%;
}
#wcp-structural-canvas .wcp-view-places .wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 3rem 0 !important;
    padding: 0 !important;
    gap: 1.5rem !important; 
}
#wcp-structural-canvas .wcp-view-places .wp-block-gallery .wp-block-image {
    flex: 0 0 calc(25% - 1.125rem) !important;
    width: calc(25% - 1.125rem) !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: #ffffff;
    border: 1px solid #eaeaea; 
    padding: 0.5rem !important; 
    box-sizing: border-box !important;
    display: block !important; 
}
#wcp-structural-canvas .wcp-view-places .wp-block-gallery .wp-block-image > a {
    display: block !important;
    position: static !important; 
    width: 100% !important;
    height: auto !important;
    margin: 0 0 0.5rem 0 !important; 
}
/* 4. Scales the images smoothly and crops them to a strict square layout block */
#wcp-structural-canvas .wcp-view-places .wp-block-gallery .wp-block-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* FIXED: Strips the vw value that caused the tall stretching */
    aspect-ratio: 1 / 1 !important; /* FIXED: Forces the image to compute as a perfect square */
    object-fit: cover !important; /* Center-crops any landscape or portrait photo inside the square */
    margin: 0 !important;
}


#wcp-structural-canvas .wcp-view-places .wp-block-gallery .wp-element-caption {
    display: block !important;
    position: static !important; 
    width: 100% !important;
    background: transparent !important; 
    color: #333333 !important; 
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 0.25rem 0 0.5rem 0 !important; 
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Place page title */
#wcp-structural-canvas .wcp-view-places h1.wcp-page-title, #wcp-structural-canvas .wcp-view-places h2.wp-block-heading {

font-size: 2.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;

}


/* Places section heading */
#wcp-structural-canvas .wcp-view-places h2.wp-block-heading {
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    width: 100%;
}

/* 7. Para text */
#wcp-structural-canvas .wcp-view-places .wcp-entry-content p {

font-size: 1.6rem !important;

}

/* Abroad & UK section headings */
#wcp-structural-canvas .wcp-entry-content > h3 {

font-size: 1.6rem !important;

}

/* Desaturate imgs by default to weak colour, resaturate to 100% on rollowver */
#wcp-structural-canvas figure img, .wp-block-image a img,
#wcp-structural-canvas .wp-block-post img {
    filter: saturate(30%) !important;
    transition: filter 0.25s ease-in-out !important;
}




/* ============================================================================= */
/* ======================== / END PLACES GALLERY PAGE ========================== */
/* ============================================================================= */



/* ============================================================================================= */
/* --- #4  Main Article & Review Index Pages (`archive-article.php` / `archive-review.php`) --- */
/* ============================================================================================= */

/* ===== ARTICLE INDEX STYLING ===== */

/* Clean side-by-side row alignment */
#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 2.5rem !important;
    align-items: start !important;
    margin-bottom: 0.5rem !important;
    border: none !important;
    box-shadow: none !important;
}

#wcp-structural-canvas .wcp-search-stream .wcp-archive-item {

    margin-bottom: 0.5rem !important;

}


/* Force the thumbnail frame to match the small live site square */
#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-thumbnail {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the image asset inside is a perfect 1:1 square crop */
#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-thumbnail img {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    filter: grayscale(100%) !important; /* ADD THIS LINE */
}

/* Live site typography titles */
#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-title {
    font-size: 1.40rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
}

#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-title a {
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 1.80rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-title a:hover {
    color: #111111 !important;
}

/* Clean summary text flow */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-summary p {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
    color: #444444 !important;
    margin-bottom: 0.4rem !important;
}

/* Muted, uppercase metadata tracking line */
#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-meta {
    font-size: 0.80rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888888 !important;
    margin-top: 0 !important;
}

/* ====================== /END ARTICLE INDEX STYLING ============================ */


/* ====================== REVIEW INDEX STYLING ================================== *?

/* Clean side-by-side row alignment for review archive rows */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 2.5rem !important;
    align-items: start !important;
    margin-bottom: 0.5rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force the review thumbnail frame to match the small 100px square */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-thumbnail {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the review image asset inside is a perfect 1:1 square crop */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-thumbnail img {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    filter: grayscale(100%) !important; /* ADD THIS LINE */
}

/* Typography match for review index titles */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-title {
    font-size: 1.80rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
}

#wcp-structural-canvas .wcp-search-stream .wcp-archive-title a {
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 1.80rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

#wcp-structural-canvas .wcp-search-stream .wcp-archive-title a:hover {
    color: #111111 !important;
}

/* Clean review summary text flow */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-summary p {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
    color: #444444 !important;
    margin-bottom: 0.4rem !important;
}

/* Muted, uppercase review metadata tracking line */
#wcp-structural-canvas .wcp-search-stream .wcp-archive-meta {
    font-size: 0.80rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888888 !important;
    margin-top: 0 !important;
}
 
/* ====================== /END REVIEW INDEX STYLING ====================== */




/* =============================================================================== */
/* ======================= / END ARTICLE AND REVIEW INDEX PAGES ================== */
/* =============================================================================== */


/* =============================================================================== */
/* --- #5 Single article and review pages (`single-article.php` / `single-review.php`) --- */
/* =============================================================================== */


/* --- CORE BODY TYPOGRAPHY CALIBRATION --- */
#wcp-structural-canvas h1.wcp-page-title,
#wcp-structural-canvas h1.wcp-archive-title,
#wcp-structural-canvas .wcp-entry-content > p,
#wcp-structural-canvas .wcp-entry-content > h2,
#wcp-structural-canvas .wcp-entry-content > h3,
#wcp-structural-canvas .wcp-entry-content > ul,
#wcp-structural-canvas .wcp-entry-content > ol,
#wcp-structural-canvas .wcp-post-tags,
#wcp-structural-canvas .wcp-comments-sandbox,
#wcp-structural-canvas .wcp-cpt-label,
#wcp-structural-canvas .wcp-archive-meta,
#wcp-structural-canvas .wcp-taxonomy-track {
    max-width: none; 
    margin-left: 0 !important; 
    margin-right: 0 !important;
}

#wcp-structural-canvas .wcp-entry-content p {
    font-size: 1.7rem !important; 
    line-height: 1.7 !important; 
    color: #2c2c2c !important; 
    margin-bottom: 1.75rem !important;
    font-weight: 400 !important; 
}

/* Direct section heading tracking with built-in top margin cushion elimination */
#wcp-structural-canvas h1.wcp-page-title {
    font-size: 2.2rem !important; 
    font-weight: 300 !important;
    color: #888888 !important;
    margin-bottom: 1.75rem !important;
    letter-spacing: -0.02em !important;
    margin-top: 0 !important; 
}

/* ==========================================================================
   ARTICLE HEADER OVERRIDES (Tweak these numbers directly)
   ========================================================================== */

/* Main Archive Title Header (Targets the single-article page header title) */
#wcp-structural-canvas h1.wcp-archive-title {
    font-size: 2.2rem !important; 
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #333333 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

/* Post Type Label ("Article") */
#wcp-structural-canvas .wcp-cpt-label {
    font-size: 2.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* Published Date & Author Meta Line */
#wcp-structural-canvas .wcp-archive-meta {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #666666 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Taxonomy Categories Track Line ("Posted in: ...") */
#wcp-structural-canvas .wcp-taxonomy-track {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #666666 !important;
    margin-bottom: 2rem !important;
}

/* Inline Category Links inside the Taxonomy Track */
#wcp-structural-canvas .wcp-taxonomy-track a {
    color: #444444 !important;
    text-decoration: none !important;
}
#wcp-structural-canvas .wcp-taxonomy-track a:hover {
    color: #111111 !important;
    text-decoration: underline !important;
}


/* =================================================================== */
/* ====================== / END SINGLE ARTICLE & SINGLE REVIEW ======= */
/* =================================================================== */




/* ================================================================== */
/* ============== #6 PHOTO OF THE DAY page ================================ */
/* ================================================================== */

/* #wcp-structural-canvas .wcp-page-entry { padding-top: 2rem; }  */
#wcp-structural-canvas .wcp-page-entry {
    padding-top: 2rem;
}

/*  /end padding */



/*  Layout for Photo of the Day feed */

#wcp-structural-canvas .wcp-view-photo-of-the-day .wp-block-image {
    background-color: #ffffff;
    border: 1px solid #eaeaea; 
    padding: 2.5rem;           
    margin: 1rem 0 4rem 0 !important; /* FIXED: Removes auto margins so it follows the group alignment */
    box-sizing: border-box;
}





#wcp-structural-canvas .wcp-view-photo-of-the-day .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#wcp-structural-canvas .wcp-view-photo-of-the-day figure img, .wcp-view-photo-of-the-day .wp-block-image a img,
#wcp-structural-canvas .wcp-view-photo-of-the-day .wp-block-post img {
    filter: saturate(100%) !important;
}

#wcp-structural-canvas .wcp-view-photo-of-the-day .wcp-entry-content h2,
#wcp-structural-canvas .wcp-view-photo-of-the-day .wcp-entry-content p {
    text-align: left;
    width: 100%;
    max-width: none !important; /* FIXED: Strips the hard limit so text can stretch naturally */
    margin: 0 0 0.5rem 0 !important;
}

/* Connects your dates, titles, and photo boxes into a single centered baseline alignment group */
#wcp-structural-canvas .wcp-view-photo-of-the-day .wcp-entry-content > * {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* FIXED: Anchors titles and dates flush left */
    max-width: fit-content;  /* FIXED: Squeezes container width to match the photo asset width */
    margin-left: auto !important;
    margin-right: auto !important;
}



/* =================================================================================== */
/* ====================== /end photo of the day feed ================================= */
/* =================================================================================== */


/* ================================================================== */
/* ============== #7 PHOTO ON THE CHEAP page ================================ */
/* ================================================================== */

/* Reduce the first hero image block size by 25% */
.page-id-1440 #wcp-structural-canvas .wcp-entry-content > .wp-block-image:first-of-type {
    width: 65% !important;
    max-width: 65% !important;
}

/* Ensure the underlying image asset scales proportionally inside the new boundary */
.page-id-1440 #wcp-structural-canvas .wcp-entry-content > .wp-block-image:first-of-type img {
    width: 100% !important;
    height: auto !important;
}




/* Improve look of the Quick look review links at the end of the page */
.page-id-1440 #wcp-structural-canvas .wcp-entry-content a {
    display: block !important;
    font-size: 1.10em !important;
    line-height: 1.8!important;
    font-weight: 500 !important;
    color: #111111!important;
    text-decoration: none !important;
    margin-bottom: 0.5rem !important;
}

/* Hover state change restricted exclusively to the Cheap page */
.page-id-1440 #wcp-structural-canvas .wcp-entry-content a:hover {
    color: #777777 !important;
    text-decoration: none !important;
}

/* Quick reviews title */
 #wcp-structural-canvas .wcp-entry-content > h2 {

    font-size: 1.7rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
}

/* =================================================================================== */
/* ====================== /end photo on the cheap page  ================================= */
/* =================================================================================== */

/* ================================================================== */
/* ============== #8 SEARCH page ================================ */
/* ================================================================== */

/* Explicitly isolates search item elements to prevent any cross-template layout drift */
#wcp-structural-canvas .wcp-search-stream .wcp-search-item .wcp-archive-thumbnail img {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    filter: grayscale(100%) !important;
}

/* Formats the inline search metadata date text to match the muted house style */
#wcp-structural-canvas .wcp-search-stream .wcp-search-item .wcp-archive-meta {
    font-size: 0.80rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888888 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important; /* Visual spacing cushion before the excerpt text block */
}


#wcp-structural-canvas .wcp-article-archive-stream .wcp-archive-title a {
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 1.80rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

/* =================================================================================== */
/* ====================== /end Search page styling  ================================= */
/* =================================================================================== */




/* ====================================================================================== */
/* ================== / END INDIVIDUAL PAGE FIXES ======================================= */
/* ====================================================================================== */


/* ==========================================================================
   LOW-CONTRAST DIMMER MODE SYSTEM - Triggered strictly via Button Selector
   ========================================================================== */

:root[data-theme="dark"] body, 
:root[data-theme="dark"] #wcp-structural-canvas,
:root[data-theme="dark"] .has-white-background-color {
    background-color: #1a1a1a !important;
    color: #d1d1d1 !important;
}

:root[data-theme="dark"] #wcp-structural-canvas p,
:root[data-theme="dark"] #wcp-structural-canvas .wcp-entry-content p,
:root[data-theme="dark"] #wcp-structural-canvas .wp-block-post-excerpt p,
:root[data-theme="dark"] #wcp-structural-canvas .wp-block-post-excerpt__excerpt {
    color: #cccccc !important;
}

:root[data-theme="dark"] #wcp-structural-canvas h1.wcp-page-title,
:root[data-theme="dark"] #wcp-structural-canvas h1.wcp-archive-title,
:root[data-theme="dark"] #wcp-structural-canvas h2.wp-block-post-title a,
:root[data-theme="dark"] #wcp-structural-canvas h2.wcp-archive-title a {
    color: #e5e5e5 !important;
}

:root[data-theme="dark"] #wcp-structural-canvas h2.wp-block-post-title a:hover,
:root[data-theme="dark"] #wcp-structural-canvas h2.wcp-archive-title a:hover {
    color: #ffffff !important;
}

:root[data-theme="dark"] #wcp-structural-canvas .wp-block-post-date,
:root[data-theme="dark"] #wcp-structural-canvas .wcp-archive-meta,
:root[data-theme="dark"] #wcp-structural-canvas .wcp-taxonomy-track,
:root[data-theme="dark"] #wcp-structural-canvas .wcp-cpt-label {
    color: #888888 !important;
}

:root[data-theme="dark"] #wcp-structural-canvas hr,
:root[data-theme="dark"] #wcp-structural-canvas .wp-block-separator,
:root[data-theme="dark"] #wcp-structural-canvas h2.wp-block-heading {
    border-color: #2e2e2e !important;
}

:root[data-theme="dark"] #wcp-structural-canvas img {
    filter: brightness(0.85) contrast(1.05) !important;
}

:root[data-theme="dark"] #wcp-structural-canvas figure.wcp-img-size img,
:root[data-theme="dark"] #wcp-structural-canvas .wcp-archive-thumbnail img {
    filter: grayscale(100%) brightness(0.8) !important;
}

/*  /end dark mode control */

/* ==========================================================================
   FOOTER NAVIGATION STYLING RESTORATION
   Forces your footer links back to a soft off-white tone in dark mode
   ========================================================================== */
html.manual-dark-mode #wcp-footer-links a {
    color: #e5e5e5 !important;
    text-decoration: none;
}

html.manual-dark-mode #wcp-footer-links a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* ==========================================================================
   GLOBAL DESKTOP FORM STYLING RESTORATION
   Applies to BOTH Bright and Dark modes to prevent miniaturization
   ========================================================================== */

/* 1. Reset font size to default theme metrics on all desktop inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea {
    font-size: 16px !important; /* Forces fields to match legible standard text scale */
    font-family: inherit !important;
    box-sizing: border-box !important;
}

/* 2. Prevent structural layout shrinking inside content containers */
#wcp-structural-canvas form input[type="text"],
#wcp-structural-canvas form input[type="email"],
#wcp-structural-canvas form textarea {
    width: 100% !important; /* Re-establishes the proper horizontal frame boundaries */
    max-width: 100% !important;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ========================== /end all desktop view fixes ================================= */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */