/**
 * Theme Name: Fintrel
 * Description: Fintrel theme, descended from Blocksy
 * Author: Little Fire Digital Ltd
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   1. GLOBAL LAYOUT & TYPOGRAPHY
   ========================================================================== */

/* Offcanvas Panel Fix */
#offcanvas .ct-panel-content-inner > *:last-child {
    min-width: 100%;
    max-width: 500px !important;
}

/* Header & Navigation */
#menu-top-left-links li.menu-item + li.menu-item a {
    border-left: 1px solid var(--theme-palette-color-1);
    height: 20px;
}

#header-menu-1 svg {
    fill: var(--theme-palette-color-1);
}

/* Footer UI */
footer *:first-child .widget-title {
    border-bottom: 2px solid var(--theme-palette-color-1);
    padding-bottom: 0.5em;
}

.footer-designations figure {
    transition: opacity 0.5s ease;
    opacity: 0.7;
}

.footer-designations figure:hover {
    opacity: 1;
}

/* Global Headings */
main *:not(.no-underline) > h2 {
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--theme-palette-color-1) !important;
}

main *:not(.no-underline) > h5 {
    padding-bottom: 0.3em;
    border-bottom: 1px dotted var(--theme-palette-color-1);
}


/* ==========================================================================
   2. GENERAL CARDS & ENTRIES
   ========================================================================== */

/* Standard Drop Shadows */
.entry-card,
.box-shadow {
    box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.1) !important;
}

/* Card Borders & Imagery */
.entries .team_member,
.entries .post {
    border-bottom: 4px solid var(--theme-palette-color-1);
}

.entries .entry-card.team_member a img,
.entries .entry-card.post a img {
    border-bottom: 2px solid var(--theme-palette-color-1);
}

/* Entry Header Styling */
.entry-header {
    position: relative;
}

.entry-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
}


/* ==========================================================================
   3. INSIGHT CARDS (Custom Grid)
   ========================================================================== */

.insight-cards .entries {
    max-width: calc(100% - 2rem);
    display: grid;
    grid-template-columns: repeat(2, 50% [col-start]);
    column-gap: 2rem;
    grid-auto-rows: 1fr !important;
}

/* 1024px Breakpoint: Switch Insights and Standard Posts to single column */
@media (max-width: 1024px) {
    .insight-cards .entries,
    .entries:has(.type-post) {
        grid-template-columns: 1fr !important;
    }
}

.insight-cards .entry-card {
    height: calc(100% - 2rem);
    border-bottom: 2px solid var(--theme-palette-color-5) !important;
    padding-bottom: 15px !important;
}

.insight-cards .entries h2 {
    border-bottom: 2px solid var(--theme-palette-color-5) !important;
}

.insight-cards .entry-card .card-content {
    height: 100%;
}

/* Insight Card Read More Buttons */
a.entry-button {
    background-color: transparent;
    color: black;
    font-family: sabon, serif;
    font-size: 1.2rem;
    padding: 6px 15px;
    border-radius: 5px;

    /* New Right-Alignment Rules */
    display: block;
    width: fit-content; /* Keeps the button exactly as wide as its text/icon */
    margin-left: auto; /* Pushes the button entirely to the right */
}

a.entry-button:hover {
    background-color: var(--theme-palette-color-3);
    color: white;
}

a.entry-button::after {
    content: "";
    margin-left: 5px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("/wp-content/uploads/2025/09/f_icon_black_32px.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

a.entry-button:hover::after {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    background-image: url("/wp-content/uploads/2025/09/f_icon_reversed_32px.webp");
}


/* ==========================================================================
   4. SERVICES & CALCULATORS
   ========================================================================== */

article.entry-card.type-service,
article.entry-card.type-calculator {
    position: relative;
    padding-bottom: 22%;
}

article.entry-card.type-service:after,
article.entry-card.type-calculator:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    display: block;
    width: 50%;
    aspect-ratio: 5.15 / 1;
    background-image: url('/wp-content/uploads/2025/12/yellow_up.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
}

article.entry-card.type-service:after {
    background-image: url('/wp-content/uploads/2025/12/pale_grey_up.svg');
}

h3.calc-name {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.calc-footer > *:first-child {
    display: none;
}

.calc-footer > *:last-child:before {
    content: 'Select Format: ';
}

.ac-calculator {
    border-radius: 0 !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.ac-calculator button {
    border-radius: 0 !important;
    font-weight: 700 !important;
}

.wpbox-btn {
    font-family: var(--theme-form-font-family) !important;
    font-size: 14pt !important;
    color: #000 !important;
    width: 100% !important;
    border: 1px solid var(--theme-palette-color-1) !important;
}

.wpbox-btn i {
    display: inline-block;
    margin-left: 0.4rem;
}


/* ==========================================================================
   5. CUSTOM TABLES (WP Core Overrides)
   ========================================================================== */

.wp-block-table {
    max-width: 100%;
    overflow-x: auto;
}

.wp-block-table table,
.wp-block-table th,
.wp-block-table td {
    border: transparent;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table table thead {
    border-bottom: 3px solid var(--theme-palette-color-1) !important;
}

.wp-block-table table tbody tr {
    border-bottom: 1px solid var(--theme-palette-color-2);
}

.wp-block-table table thead th {
    vertical-align: top;
}

.wp-block-table table tbody tr > * {
    vertical-align: top;
    border-bottom: none;
}

.wp-block-table table tbody tr > * + * {
    border-left: 1px solid var(--theme-palette-color-2);
}

.wp-block-table table th,
.wp-block-table table td {
    border: none;
    padding: 12px 15px;
    text-align: left;
}

.wp-block-table table tfoot {
    border-top: 2px solid var(--theme-palette-color-2);
}

.wp-block-table table tfoot td {
    border: none;
    padding: 0.5rem 0;
    text-align: left;
    font-size: 0.7em;
}

body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   6. CUSTOM COMPONENTS & UTILITIES
   ========================================================================== */

/* Author Box */
.acf-author-details {
    padding-bottom: 2rem;
}

.acf-author-details h4 {
    font-size: 2rem;
    line-height: 0.9;
    margin-bottom: 0.5em;
}

.post-nominals {
    white-space: nowrap;
    font-size: 0.6em;
    color: var(--theme-palette-color-5);
}

/* Call to Actions & Interactions */
.homepage-cta {
    font-weight: bold;
}

.homepage-cta,
.stk-block-content:has(+ a.stk--transparent-overlay) .photo-cta {
    transition: opacity 1s ease, transform 1s ease;
}

.homepage-cta:hover,
.stk-block-content:has(+ a.stk--transparent-overlay:hover) .photo-cta {
    opacity: 0.8;
    transform: scale(1.01);
}

/* Stackable Button Fixes */
:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination, .stk-block-load-more, .stk-block-posts):not(.is-style-link) .stk-button {
    column-gap: 0px;
}


/* ==========================================================================
   7. Empty Team Member Links
   ========================================================================== */

/* Visually suppress links for team members with no bio */
.fintrel-no-bio {
    cursor: default !important;
}

.fintrel-no-bio a {
    cursor: default !important;
    pointer-events: none !important;
}


/* ==========================================================================
   8. External Link warnings
   ========================================================================== */

.fintrel-external-link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    /* This is a lightweight, dependency-free SVG icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Modal Overlay Background */
.fintrel-compliance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999999;
}

.fintrel-compliance-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Modal Box (Desktop) */
.fintrel-compliance-modal {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    font-family: inherit;
}

.fintrel-compliance-overlay.active .fintrel-compliance-modal {
    transform: translateY(0);
}

.fintrel-compliance-modal p {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
}

/* Modal Buttons */
.fintrel-compliance-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.fintrel-compliance-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.fintrel-btn-cancel {
    background: #f1f1f1;
    color: #333333;
}

.fintrel-btn-cancel:hover {
    background: #e4e4e4;
}

.fintrel-btn-continue {
    background: #0056b3; /* Update to match Fintrel branding */
    color: #ffffff;
}

.fintrel-btn-continue:hover {
    background: #004494;
}

/* Morph into a native Bottom Sheet on Mobile */
@media (max-width: 768px) {
    .fintrel-compliance-overlay {
        align-items: flex-end; /* Pushes the box to the bottom */
    }

    .fintrel-compliance-modal {
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 24px); /* Accounts for iPhone home bar */
    }
}

/* ==========================================================================
   9. Raising text above team mugshots (there's a slight negative LH margin on the portraits)
   ========================================================================== */
.author_box .stk-inner-blocks {
	position: relative;
}

.author_box .stk-inner-blocks >*:first-child {
	z-index: 3
}

.author_box .post-nominals {
	display: block;
}

/* Unchain the author archive wrapper and let Gutenberg handle the width natively */
/* Reset the narrow variables to our standard 1440px width and ensure safe edges */
body.archive.author .ct-container-full[data-content="narrow"] {
    --theme-narrow-container-max-width: 1440px !important;
    --wp--style--global--content-size: 1440px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}