/*
Theme Name: Gaurav Duggal
Theme URI: https://goodmansvision.com/
Author: GoodmansVision
Author URI: https://goodmansvision.com/
Description: Custom WordPress theme for GD Website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gd
Tags: flexible-header, custom-menu, custom-logo, responsive-layout
*/

/* Accessibility: hide helper text visually but keep it available to assistive tech */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 8px;
    line-height: normal;
    padding: 12px 16px;
    text-decoration: none;
    top: 8px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* IBM Plex Sans Variable Font */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('assets/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 700;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Custom tooltip for social links (immediate on hover, avoids native title delay) */
.social-link[data-tooltip],
.footer-social-link[data-tooltip],
.single-blog-social-link[data-tooltip] {
    position: relative;
}

.social-link[data-tooltip]::after,
.footer-social-link[data-tooltip]::after,
.single-blog-social-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    top: 100%;
    white-space: nowrap;
    background: rgba(17, 17, 17, 0.92);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.06s linear,
        transform 0.06s ease;
    z-index: 50;
}

.social-link[data-tooltip]:hover::after,
.footer-social-link[data-tooltip]:hover::after,
.single-blog-social-link[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.social-link[data-tooltip][aria-disabled='true']::after {
    background: rgba(0, 0, 0, 0.85);
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('assets/fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 700;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}

/* IvyOra Display Font */
@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Regular.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Regular.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-RegularItalic.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-RegularItalic.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Medium.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Medium.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-MediumItalic.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-MediumItalic.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Bold.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Bold.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IvyOra Display';
    src:
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-BoldItalic.woff') format('woff'),
        url('assets/fonts/IvaOraDisplay/IvyOraDisplay-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Hurricane Font for Logo */
@font-face {
    font-family: 'Hurricane';
    src:
        url('assets/fonts/Hurricane-Regular.woff2') format('woff2'),
        url('assets/fonts/Hurricane-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Cinzel Variable Font for Logo */
@font-face {
    font-family: 'Cinzel';
    src:
        url('assets/fonts/Cinzel-VariableFont_wght.woff2') format('woff2'),
        url('assets/fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* Basic theme stylesheet — keep minimal. Header layout is in assets/css/header.css */
html {
    box-sizing: border-box;
    /* Native smooth-scrolling & anchor offset so sections clear the sticky header */
    scroll-behavior: smooth;
    scroll-padding-top: 180px;
    -webkit-text-size-adjust: 100%; /* Prevents font boosting */
    text-size-adjust: 100%; /* Prevents font boosting */
}

@media (max-width: 800px) {
    html {
        scroll-padding-top: 150px;
    }
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family:
        'IBM Plex Sans',
        system-ui,
        -apple-system,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
    color: #403936;
    background: #fdf5f1;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: normal;
}

/* Prevent horizontal scroll on mobile caused by off-screen carousel
   children (testimonials, blog cards, roadmap pins) that bleed past
   the viewport edges on physical devices.
   Applied to .site-content (not html/body) so that the sticky header
   above this wrapper is unaffected — any overflow value on html or body
   interacts with viewport propagation rules and can break sticky. */
.site-content {
    overflow-x: clip;
}

/* Smooth scrolling for anchor links */
/* ============================================
   HEADING STYLES
   ============================================ */

/* H1 - Desktop: IBM Bold 48px OR IvyOra Display Medium 48px */
h1 {
    font-family: 'IvyOra Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    color: #005b68;
    margin: 0 0 24px;
}

h1.ibm-style {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
}

/* H2 - Desktop: IvyOra Display Medium 32px */
h2 {
    font-family: 'IvyOra Display', serif;
    font-size: 32px;
    font-weight: 500;
    line-height: normal;
    color: #005b68;
    margin: 0 0 20px;
}

/* H3 - Desktop: IvyOra Display Medium 24px OR IBM Regular 24px */
h3 {
    font-family: 'IvyOra Display', serif;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    color: #403936;
    margin: 0 0 16px;
}

h3.ibm-style {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
}

/* H4 - Desktop: IBM Regular 20px */
h4 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #403936;
    margin: 0 0 14px;
}

/* H5 & H6 */
h5 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #403936;
    margin: 0 0 12px;
}

h6 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: #403936;
    margin: 0 0 12px;
}

/* Paragraph - IBM Regular 16px */
p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #403936;
    margin: 0 0 16px;
}

p:last-child {
    margin-bottom: 0;
}

/* Links */
a {
    color: #ed6a59;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #005b68;
}

.contact-page-hero {
    padding-top: 64px;
}

#primary,
.content-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.divider-wrapper {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 90px !important;
    margin: 48px 0 !important;
}

.divider-img {
    max-width: 1294px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.service-divider-2 {
    width: 100%;
    max-width: 1281px;
    margin: 0 auto;
}

.service-divider-2 img {
    width: 100%;
    max-width: 1281px;
    padding: 0 32px;
}

.service-divider-2.inverted img {
    transform: scaleX(-1);
}

/* ============================================
   LAYOUT & SPACING
   ============================================ */

/* Ensure content wrapper spacing */
.site-main {
    margin: 24px auto 140px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 140px;
    box-sizing: border-box;
    background: #fdf5f1;
}

/* Global section spacing - 200px gap between sections */
main > section,
main > .section,
.content-area > section,
.content-area > .section {
    margin-bottom: 0;
}

main > section:last-child,
main > .section:last-child,
.content-area > section:last-child,
.content-area > .section:last-child {
    margin-bottom: 0;
}

.home main > section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

h4 {
    font-size: 20px;
}

@media (max-width: 1200px) {
    .contact-page-hero {
        padding-top: 48px;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

@media (max-width: 800px) {
    /* H1 - Mobile: IBM Bold 32px OR IvyOra Display Medium 32px */
    h1 {
        font-size: 32px;
    }

    /* H2 - Mobile: IvyOra Display Medium 24px */
    h2 {
        font-size: 24px;
    }

    /* H3 - Mobile: IvyOra Display Medium 16px */
    h3 {
        font-size: 24px;
        text-align: left;
    }

    /* H4 - Mobile: IBM Regular 20px (same as desktop) */
    h4 {
        font-size: 16px;
    }

    /* Paragraph - Mobile: IBM Regular 16px (same as desktop) */
    p {
        font-size: 16px;
    }

    main > section,
    main > .section,
    .content-area > section,
    .content-area > .section {
        margin-bottom: 0;
    }

    .site-main {
        gap: 100px;
        margin-bottom: 100px;
    }

    .divider-wrapper {
        width: auto;
        padding: 0 32px !important;
        margin: 32px 0 !important;
    }

    .divider-img {
        max-width: 100%;
        width: 100%;
    }

    .service-divider-2 {
        width: 100%;
        margin: 0 auto;
    }

    .service-divider-2 img {
        max-width: none;
        padding: 0 32px;
    }
}