/**
 * Global Styles — Gutenberg pages
 *
 * Replaces the Elementor kit CSS (post-9) for non-Elementor pages.
 * Provides font loading, base typography, and minimal resets that
 * the kit previously supplied via .elementor-kit-9.
 *
 * Loaded on all pages that do NOT have _elementor_data so that
 * Elementor pages continue to use the kit CSS without duplication.
 */

/* ═══════════════════════════════════════════
   1. FONT LOADING
   ═══════════════════════════════════════════ */

/* Myriad Pro Regular — custom font uploaded to /app/uploads/ */
@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/app/uploads/2022/05/Myriad-Pro-Regular.ttf') format('truetype');
}

/* Myriad Pro — alias for references using "Myriad Pro" without "Regular" */
@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/app/uploads/2022/05/Myriad-Pro-Regular.ttf') format('truetype');
}

/* Google Fonts — Barlow (headings/accents) and Open Sans (nav/body alt) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap');

/* ═══════════════════════════════════════════
   2. FONT SMOOTHING
   ═══════════════════════════════════════════
   Font families, weights, colors, and link styles are defined in
   theme.json and auto-generated by WordPress. Only font-smoothing
   (which theme.json cannot express) is added here. */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   3. FORM ELEMENTS
   ═══════════════════════════════════════════ */

input:not([type="button"]):not([type="submit"]),
textarea {
    border: 1px solid var(--wp--preset--color--primary);
}

button,
input[type="button"],
input[type="submit"] {
    background-color: var(--wp--preset--color--primary);
    color: #FFFFFF;
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--body);
    cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: var(--wp--preset--color--accent);
    color: #FFFFFF;
    border-color: var(--wp--preset--color--accent);
}

/* ═══════════════════════════════════════════
   5. LAYOUT — disable WordPress theme.json constraints
   ═══════════════════════════════════════════
   Our Gutenberg pages handle their own widths via wp:group blocks
   with contentSize: 900px. The parent containers must not add an
   extra max-width layer on top. */

/* Remove theme.json constraints from the page-level wrappers only.
   Top-level wp:group blocks with backgrounds become full-width,
   while their inner content still respects contentSize: 900px.
   Only wp:group and wp:html blocks break out — all other blocks
   (accordion, shortcode, etc.) stay within the parent group's width. */
.page-content,
.site-main,
.editor-styles-wrapper {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

:where(.page-content)>.wp-block-group,
:where(.page-content)>.wp-block-html,
:where(.site-main)>.wp-block-group,
:where(.site-main)>.wp-block-html,
:where(.editor-styles-wrapper)>.wp-block-group,
:where(.editor-styles-wrapper)>.wp-block-html {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WordPress uses :where() (zero specificity) for is-layout-constrained
   child max-width rules. Block CSS with max-width:100% overrides them.
   Re-declare with real specificity so the parent group's contentSize wins.
   The per-group inline CSS (wp-container-core-group-*) sets the actual
   max-width value; this rule just ensures centering can't be overridden. */
.wp-block-group.is-layout-constrained> :not(.alignfull):not(.alignleft):not(.alignright) {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Default contentSize for groups — covers 99% of pages (274 of 277 groups) */
.wp-block-group.is-layout-constrained> :not(.alignfull):not(.wp-block-group) {
    max-width: 900px;
}

/* ═══════════════════════════════════════════
   6. PAGE BOILERPLATE
   ═══════════════════════════════════════════
   These rules were previously duplicated in every page's embedded
   <style> block. Centralized here so pages no longer need them. */

.page-header {
    display: none;
}

.page-content,
.editor-styles-wrapper {
    --wp--style--block-gap: 20px;
}

/* ═══════════════════════════════════════════
   7. BUTTON VARIANTS
   ═══════════════════════════════════════════
   Shared button color classes used across Gutenberg pages.
   Applied via the block's "Additional CSS class" field. */

/* Ensure all Gutenberg button links are white text */
.page-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
    color: #FFFFFF !important;
}

/* Teal button — teal-light bg, orange on hover */
.wp-block-button.vdfp-btn-teal .wp-block-button__link,
.wp-block-button__link.vdfp-btn-teal {
    background-color: var(--wp--preset--color--teal-light) !important;
    border-radius: 8px !important;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 500;
    color: #FFFFFF !important;
}

.wp-block-button.vdfp-btn-teal .wp-block-button__link:hover,
.wp-block-button__link.vdfp-btn-teal:hover {
    background-color: var(--wp--preset--color--accent) !important;
    text-decoration: none;
}

/* Blue button — primary bg, orange on hover */
.wp-block-button.vdfp-btn-blue .wp-block-button__link,
.wp-block-button__link.vdfp-btn-blue {
    background-color: var(--wp--preset--color--primary) !important;
    border-radius: 8px !important;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 500;
    color: #FFFFFF !important;
    width: 300px;
    max-width: 100%;
    text-align: center;
}

.wp-block-button.vdfp-btn-blue .wp-block-button__link:hover,
.wp-block-button__link.vdfp-btn-blue:hover {
    background-color: var(--wp--preset--color--accent) !important;
    text-decoration: none;
}

/* Orange button — accent bg, primary on hover */
.wp-block-button.vdfp-btn-orange .wp-block-button__link,
.wp-block-button__link.vdfp-btn-orange {
    background-color: var(--wp--preset--color--accent) !important;
    border-radius: 8px !important;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 500;
    color: #FFFFFF !important;
}

.wp-block-button.vdfp-btn-orange .wp-block-button__link:hover,
.wp-block-button__link.vdfp-btn-orange:hover {
    background-color: var(--wp--preset--color--primary) !important;
    text-decoration: none;
}

/* Green button — secondary (sage) bg, orange on hover */
.wp-block-button.vdfp-btn-green .wp-block-button__link,
.wp-block-button__link.vdfp-btn-green {
    background-color: var(--wp--preset--color--secondary) !important;
    border-radius: 0 !important;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;
    font-size: 1.2em;
    color: #FFFFFF !important;
}

.wp-block-button.vdfp-btn-green .wp-block-button__link:hover,
.wp-block-button__link.vdfp-btn-green:hover {
    background-color: var(--wp--preset--color--accent) !important;
    text-decoration: none;
}

/* Circle icon images (teal circle with inset SVG) */
.wp-block-image.vdfp-circle-icon,
.vdfp-circle-icon figure.wp-block-image,
.vdfp-circle-icon .wp-block-image {
    width: 112px !important;
    height: 112px;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.wp-block-image.vdfp-circle-icon img,
.vdfp-circle-icon img {
    width: 80px;
    height: 80px;
}

/* Resource card thumbnail in horizontal flex layout */
.wp-block-image.vdfp-resource-thumb {
    width: 40%;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
}
.wp-block-image.vdfp-resource-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════
   8. TEXT SELECTION
   ═══════════════════════════════════════════ */

::selection {
    background-color: rgb(1, 109, 137);
    color: white;
}

/* ═══════════════════════════════════════════
   9. WORDPRESS LOGIN PAGE
   ═══════════════════════════════════════════ */

#login > h1 > a {
    background-image: url(https://media.licdn.com/dms/image/v2/D560BAQEmA2Uj6_I5Ow/company-logo_200_200/company-logo_200_200/0/1681850463975/vancouverbc_division_of_family_practice_logo?e=2147483647&v=beta&t=HNDAYVo9VCg4yJ686-zPTWII3mQx5JBSHoCjiX0uyrY) !important;
}

#loginform .submit #submit {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════
   10. ACCESSIBILITY
   ═══════════════════════════════════════════ */

.skip-link {
    display: none !important;
}

/* ═══════════════════════════════════════════
   11. COMMENT FORM — GLOBAL HIDE
   ═══════════════════════════════════════════
   Hidden everywhere by default; shown inside
   the vdfp/discussion block via its own CSS. */

.comment-respond {
    display: none !important;
}

/* ═══════════════════════════════════════════
   12. SINGLE POST TEMPLATE
   ═══════════════════════════════════════════ */

.post-template-default .entry-title {
    display: none;
}

.post-template-default .page-content {
    margin-top: 40px;
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}