/*
Theme Name: Tharros
Theme URI: https://tharroshouse.com
Author: Dashing Digital Marketing
Description: Custom classic theme for Tharros House. Carries only the design tokens and the shared header/nav/footer chrome; each page loads its own stylesheet from assets/css/pages/. Page content is built with WPBakery Page Builder.
Version: 2.3.19
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: tharros
*/

/* ---------------------------------------------------------------------------
 * Design tokens. Verified byte-identical across all 15 mockup pages, so they
 * are safe to define once here.
 * ------------------------------------------------------------------------ */
:root {
            --primary-blue: #2C3E50;
            --secondary-slate: #5A6774;
            --accent-blue-warm: #9CB6D5;
            --light-gray-warm: #EAEBE6;
            --off-white-warm: #F9F6F2;
            --white: #FFFFFF;
            --text-primary: #212529; 
            --text-secondary: #4A5568; 
            --font-primary: 'Poppins', sans-serif;
            --font-secondary: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
            --section-padding-y: clamp(70px, 9vw, 120px); 
            --border-radius-sleek: 8px;
            --border-radius-smooth: 12px;
            --transition-elegant: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            --transition-subtle: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            --shadow-soft: 0 15px 50px rgba(60, 45, 40, 0.08);
            --shadow-medium: 0 25px 65px rgba(60, 45, 40, 0.1);
        }

/* ---------------------------------------------------------------------------
 * Shared chrome.
 *
 * ONLY rules that are byte-identical in every one of the 15 mockup pages live
 * here. Anything page-specific belongs in assets/css/pages/<slug>.css --
 * putting the homepage's own rules in this file silently restyled every other
 * page wherever that page did not happen to redefine the same selector.
 * ------------------------------------------------------------------------ */

::selection { background-color: var(--accent-blue-warm); color: var(--white); }
body, html {
            margin: 0; padding: 0; font-family: var(--font-secondary); color: var(--text-primary);
            background-color: var(--off-white-warm); line-height: 1.8;
            scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; font-weight: 400;
        }
body.mobile-menu-open { overflow: hidden; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--primary-blue); margin: 0 0 0.6em 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
p:last-child { margin-bottom: 0; }
a:hover { color: var(--accent-blue-warm); }
.btn:hover {
            background-color: var(--secondary-slate); transform: translateY(-4px);
            box-shadow: 0 12px 35px rgba(90, 103, 116, 0.22); color: var(--white) !important;
        }
.top-bar { background-color: var(--primary-blue); color: #fff; font-size: 0.85em; padding: 10px 0; position: relative; z-index: 1002; }
.top-bar-separator { margin: 0 15px; color: rgba(255,255,255,0.4); }
.main-header.scrolled {
            background-color: rgba(249, 246, 242, 0.99); border-bottom-color: var(--light-gray-warm); box-shadow: 0 6px 30px rgba(60, 45, 40, 0.04);
        }
.logo-container { flex-shrink: 0; z-index: 1002; }
.logo-container img { height: 75px; width: auto; object-fit: contain; display: block; transition: transform 0.3s ease; }
.logo-container:hover img { transform: scale(1.02); }
.desktop-nav { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; }
.desktop-nav > li { position: relative; padding: 25px 0; margin: 0 18px; }
.desktop-nav > li > a:hover { color: var(--accent-blue-warm); }
.nav-arrow { font-size: 0.6em; opacity: 0.6; transition: transform 0.3s ease; }
.desktop-nav > li:hover .nav-arrow { transform: rotate(180deg); }
.dropdown-menu {
            position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); background-color: var(--white);
            min-width: 240px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; padding: 12px 0;
            opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); border-top: 3px solid var(--accent-blue-warm); z-index: 1100; list-style: none;
        }
.desktop-nav > li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/*
 * The keyboard equivalent of the rule above (:focus-within) is NOT here. All
 * fifteen page stylesheets carry their own copy of these dropdown rules and load
 * after this file, so a rule of equal specificity here is overridden on every
 * page. It lives in assets/css/a11y.css, which is enqueued last.
 */
.dropdown-menu li { display: block; margin: 0; padding: 0; }
.dropdown-menu a:hover { background-color: var(--off-white-warm); color: var(--primary-blue); border-left-color: var(--primary-blue); padding-left: 30px; }
.mobile-menu-toggle { display: none; cursor: pointer; background: none; border: none; padding: 10px; margin-left: auto; z-index: 1002; }
.hamburger-line { width: 30px; height: 3px; background-color: var(--primary-blue); border-radius: 3px; display: block; position: relative; transition: all 0.3s ease-in-out; }
.hamburger-line::before, .hamburger-line::after { content: ''; position: absolute; width: 30px; height: 3px; background-color: var(--primary-blue); border-radius: 3px; left: 0; transition: all 0.3s ease-in-out; }
.hamburger-line::before { transform: translateY(-10px); }
.hamburger-line::after { transform: translateY(10px); }
body.mobile-menu-open .hamburger-line { background-color: transparent !important; }
body.mobile-menu-open .hamburger-line::before { transform: rotate(45deg) translate(7px, 7px) !important; }
body.mobile-menu-open .hamburger-line::after { transform: rotate(-45deg) translate(7px, -7px) !important; }
.mobile-nav-container { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(249, 246, 242, 0.98); backdrop-filter: blur(10px); z-index: 1001; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; }
.mobile-nav-container.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.main-footer { background-color: var(--white); color: var(--text-secondary); padding: 80px 0 40px 0; border-top: 1px solid var(--light-gray-warm); }
.main-footer .container-footer { width: 90%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(40px, 5vw, 70px); margin-bottom: 60px; }
.main-footer h4 { font-family: var(--font-primary); color: var(--primary-blue); margin-bottom: 25px; font-weight: 600; font-size: 1.1em; letter-spacing: 0.03em; text-transform: uppercase; }
.main-footer ul { list-style: none; padding: 0; margin: 0; }
.main-footer ul li { margin-bottom: 15px; }
.main-footer a:hover { color: var(--primary-blue); }
.footer-logo-container img { max-height: 100px; width: auto; margin-bottom: 25px; }
.footer-contact-details p { display: flex; align-items: flex-start; }
.footer-icon svg { width: 1.2em; height: 1.2em; }
.footer-bottom { text-align: center; padding-top: 40px; border-top: 1px solid var(--light-gray-warm); font-size: 0.9em; color: var(--secondary-slate); }
.mobile-menu-close {
            display: none;
        }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Visually hidden but available to assistive technology and crawlers.
   Used to give short "Read More" links the article title as context. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cards for posts with no featured image: a tinted block rather than a gap,
   so a mixed row does not look half broken. */
.blog-card-img-fallback {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 133px;
	background: linear-gradient(135deg, #cfd8e3 0%, #eef1f5 100%);
}

/* Card thumbnails.
   .post-thumb is a flex container that also holds the category tag, so an <img>
   left in normal flow becomes a flex sibling of the tag and shrinks to share the
   row - which is exactly what happened once real featured images replaced the
   mockup's SVG icon. Taking the image out of flow lets it cover the slot at any
   source size and lets the tag sit on top of it. There was never a
   .post-thumb-photo rule; the mockup's one photo only looked right because it
   happened to be large enough to fill. */
.post-thumb > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.post-thumb .post-tag { z-index: 3; }
.post-thumb::after { z-index: 2; }

.blog-card-img { position: relative; overflow: hidden; }
.blog-card-img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Related Articles.
   The article stylesheet styles .related's background and border but never
   defines padding for .section, so the block computed to padding-top: 0 and the
   "Keep Reading" kicker sat flush against the end of the article. Uses the
   site's own spacing variable so it matches every other section's rhythm.
   .section.related outranks both .section and .related on specificity. */
.section.related {
	padding-top: var(--section-padding-y, clamp(70px, 9vw, 120px));
	padding-bottom: var(--section-padding-y, clamp(70px, 9vw, 120px));
}

/* Related-article thumbnails.
   .rel-thumb styles a gradient, an ::after wash and the tag, but never an img -
   the same omission as .post-thumb. Without this the photo renders at its
   natural 768px inside a 374px box. */
.rel-thumb { overflow: hidden; }
.rel-thumb > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.rel-thumb .post-tag { z-index: 3; }
.rel-thumb::after { z-index: 2; }

/* The closing CTA's heading inherits the ~70px top margin meant to separate
   prose sections, which on top of the box's own 64px padding put 134px above
   the heading against 64px below the button. .key-takeaways and .toc already
   zero this; .article-cta was missed. */
/* .article-body h2 sets margin-top: 1.8em and lives in the page stylesheet,
   which loads after this file, so an equal-specificity rule loses. Two classes
   beats one - no !important needed. */
.article-body .article-cta h2 { margin-top: 0; }

/* .btn-text-link is defined only in the homepage stylesheet, so the "Read More"
   links on /blogs/ cards and related-article cards had no styling. Same rules,
   here so every page gets them. */
.btn-text-link {
	color: var(--primary-blue);
	font-weight: 500;
	text-decoration: none;
	position: relative;
	padding-bottom: 8px;
	display: inline-block;
}
.btn-text-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background-color: var(--accent-blue-warm);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-text-link:hover::after,
.btn-text-link:focus-visible::after { width: 100%; }

/* Sits below the meta row inside a card. */
.card-read-more { margin-top: 16px; font-size: 0.95em; }

/* Citation link under a callout figure. Sits quietly below the statement
   rather than competing with it. */
/* .article-body a sets colour to --primary-blue, which is the exact navy the
   callout uses as its background - so an inherited colour rendered the link
   invisible, underline only. Two classes beat .article-body a, and the colour
   is stated explicitly rather than inherited. */
.article-body .callout-source,
.callout .callout-source {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	opacity: 0.82;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	text-underline-offset: 3px;
}
.article-body .callout-source:hover,
.article-body .callout-source:focus-visible,
.callout .callout-source:hover,
.callout .callout-source:focus-visible {
	color: #fff;
	opacity: 1;
	text-decoration-color: #fff;
}