/**
 * Porto V2 — Contact Page Clean CSS
 * Namespace: .ct-*
 * Scope: body.contact-index-index
 * Load: AFTER porto.css
 * Max: 400 lines
 */

/* =============================================================
   1. RESET — defeat .column.main width constraint
   ============================================================= */
body.contact-index-index .columns,
body.contact-index-index .column.main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    /* Prevent flex shrinking: porto.css sets column.main to display:flex
       which causes direct children (ct-page-header, ct-layout) to shrink
       to content width. Forcing block restores full-width child layout. */
    display: block !important;
}

body.contact-index-index .page-main {
    max-width: none !important;
    padding: 0 !important;
}

/* =============================================================
   2. CONTAINER — centred 1200px wrapper
   ============================================================= */
body.contact-index-index .ct-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================================
   3. PAGE HEADER — breadcrumbs + title
   ============================================================= */
body.contact-index-index .ct-page-header {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 0;
    margin-bottom: 0;
}

body.contact-index-index .ct-page-header .ct-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

body.contact-index-index .ct-breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #777;
}

body.contact-index-index .ct-breadcrumb li {
    display: flex;
    align-items: center;
}

body.contact-index-index .ct-breadcrumb li + li::before {
    content: "/";
    margin: 0 6px;
    color: #bbb;
}

body.contact-index-index .ct-breadcrumb a {
    color: #08c;
    text-decoration: none;
}

body.contact-index-index .ct-breadcrumb a:hover {
    text-decoration: underline;
}

body.contact-index-index .ct-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================
   4. INFO CARDS — 4-column row
   ============================================================= */
body.contact-index-index .ct-info {
    background: #fff;
    padding: 36px 0;
    border-bottom: 1px solid #e8e8e8;
}

body.contact-index-index .ct-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

body.contact-index-index .ct-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
    transition: box-shadow 0.2s;
}

body.contact-index-index .ct-info-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

body.contact-index-index .ct-info-card__icon {
    width: 52px;
    height: 52px;
    background: #08c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

body.contact-index-index .ct-info-card__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.contact-index-index .ct-info-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 6px;
}

body.contact-index-index .ct-info-card__value {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

/* =============================================================
   5. MAP SECTION
   Map is now wrapped in .ct-map-outer > .ct-container > .ct-map
   so the iframe is naturally constrained to the ct-container's 1200px width.
   ============================================================= */
body.contact-index-index .ct-map-outer {
    width: 100%;
    line-height: 0;
}

body.contact-index-index .ct-map-outer .ct-container {
    padding-left: 0;
    padding-right: 0;
}

body.contact-index-index .ct-map {
    line-height: 0;
    background: #e8eaed; /* placeholder while OSM tiles load */
}

body.contact-index-index .ct-map iframe {
    display: block;
    width: 100%;
    /* porto.css sets 330px + margin-bottom:40px via iframe[src*="google.com/maps"] — override both */
    height: 300px !important;
    margin-bottom: 0 !important;
    border: 0;
}

/* =============================================================
   6. LAYOUT — 2-column grid: 60% form + 40% sidebar
   ============================================================= */
body.contact-index-index .ct-layout {
    background: #fff;
    padding: 48px 0 60px;
}

body.contact-index-index .ct-layout-inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 40px;
    align-items: start;
}

/* =============================================================
   7. FORM SECTION
   ============================================================= */
body.contact-index-index .ct-form-wrap {
    /* left column */
}

/* R39: match reference — 20px/300/grey (reference: legend.legend 20px font-weight:300 color:#777) */
body.contact-index-index .ct-form-title {
    font-size: 20px;
    font-weight: 300;
    color: #777;
    margin: 0 0 24px;
}

/* R40: Porto two-tone — span "Us" is bold but same grey as base text.
   R41: !important needed because porto.css `html body span:not([class]) { color:#777 !important }` wins.
   R50: reference uses <b> tag which inherits parent #777 at bold weight — "Us" stays grey, not dark.
        Corrected from #333 → #777 to match reference's Write <b>Us</b> rendering. */
body.contact-index-index .ct-form-title span {
    font-weight: 700;
    color: #777 !important;
}

body.contact-index-index .ct-form .fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

body.contact-index-index .ct-form .field {
    margin-bottom: 18px;
}

body.contact-index-index .ct-form .field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

/* R39: border-radius 4px → 0 to match Porto reference (square inputs)
   R50: reference inputs have transparent bg + no border; height 40px; left-padding 20px.
        !important required: porto.css lines 15602 and 16972 set border/bg/height with !important
        on body.contact-index-index .fieldset input and form#contact-form .field input respectively.
        contact-clean.css loads after porto.css, but !important in porto.css beats non-!important here
        regardless of source order — must match specificity tier with !important to override. */

/* Single-line inputs — reference: border 1px rgba(0,0,0,.09), bg white, padding 8/12 */
body.contact-index-index .ct-form .field input[type="text"],
body.contact-index-index .ct-form .field input[type="email"],
body.contact-index-index .ct-form .field input[type="tel"] {
    width: 100%;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: #333;
    background: #fff !important;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
    -webkit-appearance: none;
}

/* Textarea — separate rule, no fixed height */
body.contact-index-index .ct-form .field textarea {
    width: 100%;
    min-height: 120px;
    height: auto !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0;
    font-size: 14px;
    color: #333;
    background: #fff !important;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
    resize: vertical;
}

body.contact-index-index .ct-form .field input[type="text"]:focus,
body.contact-index-index .ct-form .field input[type="email"]:focus,
body.contact-index-index .ct-form .field input[type="tel"]:focus,
body.contact-index-index .ct-form .field textarea:focus {
    outline: none;
    /* Opacity 0.6 → effective color ~#3399cc on white ≈ 4.5:1 contrast (WCAG 2.4.7 compliant).
       Reference has no custom focus style beyond browser default; this ring is better. */
    box-shadow: 0 0 0 2px rgba(0,136,204,0.60);
    background: transparent;
}

/* 2-column form grid: left inputs + right textarea */
body.contact-index-index .ct-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

body.contact-index-index .ct-form-left {
    display: flex;
    flex-direction: column;
}

body.contact-index-index .ct-form-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Textarea fills full height of the right column to match left input stack */
body.contact-index-index .ct-form-right .field {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

body.contact-index-index .ct-form-right .field .control {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* R62: use ct-form-right + textarea element to raise specificity to (0,3,2) —
   beating porto.css `body.contact-index-index .fieldset textarea { min-height:120px !important }`
   at (0,2,2). Without this, both rules carry !important and porto.css won on specificity. */
body.contact-index-index .ct-form-right textarea.ct-textarea-full {
    min-height: 170px !important;
    height: 170px !important;
    resize: vertical !important;
}

body.contact-index-index .ct-form .actions-toolbar {
    margin-top: 20px;
    margin-left: 0 !important;
}

/* R39b: porto.css 2px radius override → use ID selector for cascade.
   R132 definitive: getComputedStyle on m2.portotheme.com/demo1_en/contact, selector
     "button.action.submit", viewport 1440x900 → borderRadius:"0px", padding:"11.2px 28px".
   History: R66 pill-right → R67 flat → R117 pill-right → R120 flat → R128 pill-right (wrong) →
   R132 flat (correct, third independent measurement confirms 0px).
   DO NOT change without re-measuring live reference at the URL above first.
   All !important: porto.css .action.primary/.action.submit carry !important at higher
   specificity — these are the only way to win the cascade from clean CSS. */
body.contact-index-index form#contact-form button.action.submit,
body.contact-index-index .ct-form .action.submit {
    display: inline-block;
    background: #08c !important;
    color: #fff;
    border: none;
    padding: 11.2px 28px !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.2s;
}

body.contact-index-index .ct-form .action.submit:hover {
    background: #0077b3;
}

/* R42: submit button label span — porto.css `html body span:not([class]) { color:#777 !important }`
   wins over inherited white from the button element. Use ID selector (#contact-form) to match
   the same specificity tier as porto.css's submit rule, then !important closes the gap. */
body.contact-index-index form#contact-form button.action.submit span,
body.contact-index-index .ct-form .action.submit span {
    color: #fff !important;
}

/* =============================================================
   8. SIDEBAR
   ============================================================= */
body.contact-index-index .ct-sidebar {
    /* right column */
}

/* R40: Porto two-tone sidebar heading — "Contact" base is normal, "Details" span is bold */
body.contact-index-index .ct-sidebar-title {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin: 0 0 20px;
}

/* R40/R41: "Contact" base is 400/#333, "Details" span is 700.
   !important needed — porto.css `html body span:not([class]) { color:#777 !important }` wins
   over non-!important. inherit !important passes through the parent's #333. */
body.contact-index-index .ct-sidebar-title span {
    font-weight: 700;
    color: inherit !important;
}

body.contact-index-index .ct-sidebar-text {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 28px;
}

body.contact-index-index .ct-sidebar-details {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

body.contact-index-index .ct-sidebar-details li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

body.contact-index-index .ct-sidebar-details .ct-sd-icon {
    width: 36px;
    height: 36px;
    background: #08c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.contact-index-index .ct-sidebar-details .ct-sd-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.contact-index-index .ct-sidebar-details .ct-sd-text strong {
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

body.contact-index-index .ct-social-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.contact-index-index .ct-social-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #08c;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s;
}

body.contact-index-index .ct-social-row a:hover {
    background: #0077b3;
}

body.contact-index-index .ct-social-row a svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* =============================================================
   9. RESPONSIVE
   ============================================================= */
@media (max-width: 991px) {
    body.contact-index-index .ct-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    body.contact-index-index .ct-layout-inner {
        grid-template-columns: 1fr;
    }

    body.contact-index-index .ct-form-grid {
        grid-template-columns: 1fr;
    }

    /* R62: match the high-specificity selector used in the main rule to win the !important battle */
    body.contact-index-index .ct-form-right textarea.ct-textarea-full {
        height: 140px !important;
        min-height: 140px !important;
    }

    body.contact-index-index .ct-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.contact-index-index .ct-page-header .ct-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    body.contact-index-index .ct-info-grid {
        grid-template-columns: 1fr;
    }
}