/* ==========================================================
GlobalTime.io
Canada Province Pages

Examples:
Alberta, Ontario, Quebec, British Columbia...

File:
/assets/css/canada/provinces.css
========================================================== */

/* ==========================================================

1. PAGE LAYOUT
   ========================================================== */

.hero {

width: 100%;
max-width: 1200px;

margin: 0 auto;

padding: 24px 16px 40px;

display: flex;
flex-direction: column;

gap: 24px;

box-sizing: border-box;

}

/* ==========================================================
2. BASE CARD
========================================================== */

.card {

background: rgba(255, 255, 255, 0.94);

border: 1px solid rgba(148, 163, 184, 0.30);

border-radius: 18px;

padding: 18px 20px;

box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12);

backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);

box-sizing: border-box;

}

/* Main Province Content */

.info-block {

width: 100%;

display: flex;
flex-direction: column;

gap: 22px;

}

/* Nested Cards */

.info-block .card {

background: rgba(248, 250, 252, 0.90);

}

/* ==========================================================
3. DARK MODE — CARDS
========================================================== */

body.dark-mode .card {

background: rgba(15, 23, 42, 0.96);

border-color: rgba(148, 163, 184, 0.35);

box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.70);

}

body.dark-mode .info-block .card {

background: rgba(15, 23, 42, 0.82);

}

/* ==========================================================
4. PROVINCE HERO TITLE
========================================================== */

.canada-title {

width: 100%;

display: flex;
flex-direction: column;

align-items: center;

margin: 0 0 8px;

text-align: center;

}

.canada-title .title-main {

display: inline-flex;

align-items: center;
justify-content: center;

gap: 12px;

font-size: clamp(1.75rem, 3.5vw, 2.3rem);

font-weight: 700;

line-height: 1.25;

color: #0f172a;

}

.canada-title .tz-small {

display: block;

margin-top: 7px;

font-size: 0.88rem;

font-weight: 500;

color: #6b7280;

}

body.dark-mode .canada-title .title-main {

color: #f3f4f6;

}

body.dark-mode .canada-title .tz-small {

color: #9ca3af;

}

/* ==========================================================
5. FLAG
========================================================== */

.flag-inline-title {

display: inline-block;

width: auto;
height: 1em;

flex: 0 0 auto;

object-fit: contain;

vertical-align: middle;

border-radius: 3px;

box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.18);

}

.canada-title .flag-inline-title {

width: 42px;
height: auto;

}

.section-title .flag-inline-title {

width: auto;
height: 1em;

box-shadow: none;

}

/* ==========================================================
6. INTRO TEXT
========================================================== */

.info-text {

width: 100%;
max-width: 960px;

margin: 0 auto;

text-align: center;

font-size: 0.95rem;

line-height: 1.8;

color: #64748b;

}

body.dark-mode .info-text {
color: #9ca3af;

}

/* ==========================================================
7. BIG PROVINCE CLOCK
========================================================== */

.country-big-clock {

width: 100%;

display: flex;
flex-direction: column;

align-items: center;
justify-content: center;

margin-top: 6px;

padding: 28px 10px;

border-radius: 20px;

background:
    radial-gradient(
        circle at top,
        rgba(37, 99, 235, 0.18),
        transparent 68%
    );

box-sizing: border-box;

}

.country-time-value {
font-size: clamp(3rem, 6vw, 4.25rem);

font-weight: 700;

line-height: 1.15;

letter-spacing: 0.08em;

font-variant-numeric: tabular-nums;

color: #111827;

}

.country-time-label {

margin-top: 8px;

font-size: 0.92rem;

color: #6b7280;

}

body.dark-mode .country-time-value {

color: #f3f4f6;

}

body.dark-mode .country-time-label {

color: #9ca3af;

}

/* ==========================================================
8. UTC CLOCK
========================================================== */

.utc-row {

width: fit-content;

margin: 0 auto;

padding: 8px 16px;

display: flex;

align-items: center;
justify-content: center;

gap: 8px;

border: 1px solid rgba(148, 163, 184, 0.40);

border-radius: 999px;

background: rgba(37, 99, 235, 0.05);

}

.clock-time {

font-size: 0.95rem;

font-weight: 600;

font-variant-numeric: tabular-nums;

color: #0f172a;

}

.clock-tz {

font-size: 0.82rem;

text-transform: uppercase;

letter-spacing: 0.12em;

color: #6b7280;

}

body.dark-mode .utc-row {

background: rgba(37, 99, 235, 0.12);

border-color: rgba(37, 99, 235, 0.22);

}

body.dark-mode .clock-time {

color: #f3f4f6;

}

body.dark-mode .clock-tz {

color: #9ca3af;

}

/* ==========================================================
9. SECTION TITLES
========================================================== */

.section-title {

display: inline-flex;

align-items: center;

gap: 8px;

margin: 16px 0 10px;

font-size: 1.08rem;

font-weight: 700;

line-height: 1.4;

color: #0f172a;

}

body.dark-mode .section-title {

color: #f3f4f6;

}

/* ==========================================================
10. ABOUT PROVINCE TEXT
========================================================== */

.about-text {

margin: 0;

font-size: 0.97rem;

line-height: 1.9;

color: #374151;

}

body.dark-mode .about-text {

color: #d1d5db;

}

/* ==========================================================
11. PROVINCE META GRID
========================================================== */

.meta-row {

display: grid;

grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr));

gap: 14px;

margin-top: 12px;

}

.meta {

padding: 10px 12px;

border-left:
    3px solid rgba(148, 163, 184, 0.60);

border-radius: 0 10px 10px 0;

background: rgba(241, 245, 249, 0.90);

font-size: 0.92rem;

line-height: 1.65;

color: #475569;

}

.meta a {

color: #2563eb;

font-weight: 500;

text-decoration: underline;

text-underline-offset: 2px;

}

.meta a:hover {
color: #1d4ed8;

text-decoration: none;

}

body.dark-mode .meta {

background: rgba(15, 23, 42, 0.75);

color: #e5e7eb;

}

body.dark-mode .meta a {

color: #93c5fd;

}

body.dark-mode .meta a:hover {

color: #bfdbfe;

}

/* ==========================================================
12. SEO CONTENT CARD
========================================================== */

.seo-text {

margin-top: 24px;

}

.seo-text h2 {

margin: 0 0 14px;

font-size: 1.35rem;

line-height: 1.4;

color: #0f172a;

}

.seo-text p {
margin: 0 0 16px;

font-size: 0.96rem;

line-height: 1.9;

color: #475569;

}

.seo-text p:last-of-type {

margin-bottom: 0;

}

.seo-text a {

color: #2563eb;

text-decoration: underline;

text-underline-offset: 2px;

}

.seo-text a:hover {

color: #1d4ed8;

text-decoration: none;

}

body.dark-mode .seo-text h2 {

color: #f3f4f6;

}

body.dark-mode .seo-text p {

color: #d1d5db;

}

body.dark-mode .seo-text a {

color: #93c5fd;

}

body.dark-mode .seo-text a:hover {
color: #bfdbfe;

}

/* ==========================================================
13. POPULAR PROVINCE TIME SEARCHES
========================================================== */

.related-tags {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin: 16px 0 10px;

}

.tag-item {

display: inline-flex;

}

.tag-item a {

display: inline-flex;

align-items: center;
justify-content: center;

padding: 8px 14px;

border:
    1px solid rgba(148, 163, 184, 0.35);

border-radius: 999px;

background: #f8fafc;

color: #2563eb;

text-decoration: none;

font-size: 0.88rem;

font-weight: 500;

transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;

}

.tag-item a:hover {

background: rgba(37, 99, 235, 0.08);

border-color: #3b82f6;

color: #1d4ed8;

transform: translateY(-1px);

box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.12);

}

.tag-item a:focus-visible {

outline: 2px solid #2563eb;

outline-offset: 2px;

}

body.dark-mode .tag-item a {

background: rgba(15, 23, 42, 0.90);

border-color: rgba(148, 163, 184, 0.28);

color: #93c5fd;

}

body.dark-mode .tag-item a:hover {

background: rgba(37, 99, 235, 0.18);

border-color: #60a5fa;

color: #dbeafe;

}

/* ==========================================================
14. PROVINCE CITY GRIDS
========================================================== */

.cities {

display: grid;

grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

gap: 14px;

margin-top: 12px;

}

/* ==========================================================
15. CITY CLOCK CARDS
========================================================== */

.city-card {

display: flex;
flex-direction: column;

gap: 6px;

min-width: 0;

padding: 14px;

border:
    1px solid rgba(148, 163, 184, 0.25);

border-radius: 14px;

background:
    radial-gradient(
        circle at top left,
        rgba(37, 99, 235, 0.10),
        transparent 60%
    ),
    #ffffff;

box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.08);

transition:
    transform 0.15s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;

}

.city-card:hover {

transform: translateY(-2px);

border-color: #93c5fd;

box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.12);

}

.city-name {

font-size: 0.97rem;

font-weight: 600;

color: #0f172a;

}

.city-time {

font-size: 1.35rem;

font-weight: 700;

font-variant-numeric: tabular-nums;

color: #2563eb;

}

.city-offset {

font-size: 0.82rem;

color: #6b7280;

}

body.dark-mode .city-card {

background:
    radial-gradient(
        circle at top left,
        rgba(37, 99, 235, 0.18),
        transparent 60%
    ),
    rgba(15, 23, 42, 0.95);

border-color: rgba(148, 163, 184, 0.20);

box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45);

}

body.dark-mode .city-name {

color: #f3f4f6;

}

body.dark-mode .city-time {

color: #93c5fd;

}

body.dark-mode .city-offset {

color: #9ca3af;

}

/* ==========================================================
16. PROVINCE INFORMATION ACCORDION
========================================================== */

.info-section {

overflow: hidden;

padding: 0;

border:
    1px solid rgba(148, 163, 184, 0.28);

border-radius: 16px;

background: rgba(255, 255, 255, 0.72);

transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;

}

.info-section + .info-section {

margin-top: 0;

}

.info-section:hover {

border-color: rgba(96, 165, 250, 0.55);

}

.info-section.active {

border-color: rgba(37, 99, 235, 0.40);

box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.08);

}

/* ==========================================================
17. ACCORDION BUTTON
========================================================== */

.info-toggle {

width: 100%;

display: flex;

align-items: center;
justify-content: space-between;

gap: 16px;

padding: 18px 22px;

border: 0;

background: transparent;

color: #0f172a;

cursor: pointer;

text-align: left;

font: inherit;

font-size: 1rem;

font-weight: 700;

transition:
    background 0.18s ease;

}

.info-toggle:hover {

background: rgba(37, 99, 235, 0.05);

}

.info-toggle:focus-visible {
outline: 2px solid #2563eb;

outline-offset: -3px;

}

/* ==========================================================
18. ACCORDION ICON
========================================================== */

.toggle-icon {

flex: 0 0 auto;

display: flex;

align-items: center;
justify-content: center;

width: 28px;
height: 28px;

font-size: 1.3rem;

font-weight: 600;

line-height: 1;

color: #2563eb;

transition:
    transform 0.28s ease;

}

.info-section.active .toggle-icon {

transform: rotate(45deg);

}

/* ==========================================================
19. ACCORDION CONTENT
========================================================== */

.info-content {

max-height: 0;

overflow: hidden;

padding: 0 22px;

transition:
    max-height 0.38s ease,
    padding 0.25s ease;

}

.info-section.active .info-content {

padding:
    0 22px 22px;

}

.info-content h3 {

margin: 4px 0 12px;

font-size: 1.08rem;

font-weight: 700;

color: #111827;

}

.info-content h4 {

margin: 20px 0 8px;

font-size: 0.97rem;

font-weight: 700;

color: #1f2937;

}

.info-content p {

margin: 0 0 14px;

font-size: 0.95rem;

line-height: 1.85;

color: #475569;

}

.info-content ul {

margin: 8px 0 16px;

padding-left: 22px;

}

.info-content li {

margin-bottom: 8px;

font-size: 0.94rem;

line-height: 1.72;

color: #475569;

}

.info-content li:last-child {

margin-bottom: 0;

}

/* ==========================================================
20. ACCORDION DARK MODE
========================================================== */

body.dark-mode .info-section {

background: rgba(15, 23, 42, 0.88);

border-color: rgba(148, 163, 184, 0.22);

}

body.dark-mode .info-section:hover {

background: rgba(30, 41, 59, 0.92);

border-color: rgba(96, 165, 250, 0.60);

}

body.dark-mode .info-section.active {

border-color: rgba(96, 165, 250, 0.50);

box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.30);

}

body.dark-mode .info-toggle {

color: #f3f4f6;

}

body.dark-mode .info-toggle:hover {

background: rgba(37, 99, 235, 0.10);

}

body.dark-mode .toggle-icon {
color: #93c5fd;

}

body.dark-mode .info-content h3,
body.dark-mode .info-content h4 {

color: #f3f4f6;

}

body.dark-mode .info-content p,
body.dark-mode .info-content li {

color: #d1d5db;

}

/* ==========================================================
21. PROVINCE GUIDE INTRO
========================================================== */

.province-guide-intro {

    width: 100%;

    margin-top: 6px;

}


.province-guide-title {

    margin:
        0 0 12px;

}


.province-guide-description {

    margin: 0 0 14px;

    font-size: 0.95rem;

    line-height: 1.75;

    color: #64748b;

}


body.dark-mode
.province-guide-description {

    color: #9ca3af;

}

/* ==========================================================
22. EXPLORE CANADA
========================================================== */

/* ---------- Main Explore Canada Box ---------- */

.sidebar-main-box {

    width: 100%;

    max-width: 100%;

    margin-top: 20px;

    box-sizing: border-box;

}

/* ---------- Default Sidebar Grid ---------- */

.sidebar-inner-box {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;

    align-items: stretch;

    box-sizing: border-box;

}

/* ---------- Sidebar Links ---------- */

.division-link {

    width: 100%;

    min-width: 0;

    min-height: 66px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 8px;

    border:
        1px solid rgba(148, 163, 184, 0.35);

    border-radius: 12px;

    background: #f8fafc;

    color: #0f172a;

    text-align: center;

    text-decoration: none;

    font-size: 0.88rem;

    font-weight: 500;

    line-height: 1.35;

    overflow-wrap: normal;

    word-break: normal;

    hyphens: none;

    box-sizing: border-box;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;

}


/* ---------- Remove Old Link Arrow ---------- */

.division-link::after {

    content: none;

}


/* ---------- Hover ---------- */

.division-link:hover {

    background:
        rgba(37, 99, 235, 0.08);

    border-color: #2563eb;

    color: #0f172a;

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, 0.10);

    transform:
        translateY(-2px);

}


/* ---------- Keyboard Focus ---------- */

.division-link:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, 0.28);

    outline-offset: 3px;

    border-color: #2563eb;

}


/* ---------- Active Province ---------- */

.division-link.active,
.division-link.active-division,
.division-link[aria-current="page"] {

    background:
        rgba(37, 99, 235, 0.12);

    border-color: #2563eb;

    color: #0f172a;

    font-weight: 600;

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, 0.08);

}


/* ---------- Active Province Hover ---------- */

.division-link.active:hover,
.division-link.active-division:hover,
.division-link[aria-current="page"]:hover {

    background:
        rgba(37, 99, 235, 0.17);

    border-color: #1d4ed8;

    color: #0f172a;

}


/* ==========================================================
DARK MODE
========================================================== */

body.dark-mode .division-link {

    background:
        rgba(15, 23, 42, 0.92);

    border-color:
        rgba(148, 163, 184, 0.28);

    color: #e5e7eb;

}


/* ---------- Dark Mode Hover ---------- */

body.dark-mode .division-link:hover {

    background:
        rgba(37, 99, 235, 0.18);

    border-color: #60a5fa;

    color: #dbeafe;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.28);

}


/* ---------- Dark Mode Focus ---------- */

body.dark-mode .division-link:focus-visible {

    outline-color:
        rgba(96, 165, 250, 0.45);

    border-color: #60a5fa;

}


/* ---------- Dark Mode Active Province ---------- */

body.dark-mode .division-link.active,
body.dark-mode .division-link.active-division,
body.dark-mode .division-link[aria-current="page"] {

    background:
        rgba(37, 99, 235, 0.25);

    border-color: #60a5fa;

    color: #ffffff;

    font-weight: 600;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.16);

}


/* ---------- Dark Mode Active Hover ---------- */

body.dark-mode .division-link.active:hover,
body.dark-mode .division-link.active-division:hover,
body.dark-mode .division-link[aria-current="page"]:hover {

    background:
        rgba(37, 99, 235, 0.34);

    border-color: #93c5fd;

    color: #ffffff;

}


/* ==========================================================
RESPONSIVE
========================================================== */

/* ---------- Tablet ---------- */

@media (max-width: 960px) {

    .sidebar-inner-box {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }

}


/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .sidebar-inner-box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

    }


    .division-link {

        min-height: 58px;

        padding: 9px 8px;

        font-size: 0.84rem;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width: 400px) {

    .sidebar-inner-box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

    }


    .division-link {

        min-height: 54px;

        padding: 8px 6px;

        font-size: 0.82rem;

    }

}


/* ==========================================================
REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .division-link {

        transition: none;

    }


    .division-link:hover {

        transform: none;

    }

}
/* ==========================================================
23. BACK TO CANADA BUTTON
========================================================== */

.back-home-wrapper {

width: 100%;
max-width: 1200px;

margin: 0 auto 40px;

padding: 0 16px;

box-sizing: border-box;

}

.back-home-button {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 10px 18px;

border:
    1px solid rgba(148, 163, 184, 0.40);

border-radius: 999px;

background: #f8fafc;

color: #475569;

text-decoration: none;

font-size: 0.92rem;

font-weight: 500;

transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;

}

.back-home-button:hover {

background: rgba(37, 99, 235, 0.08);

border-color: #60a5fa;

color: #1d4ed8;

transform: translateY(-1px);

}

body.dark-mode .back-home-button {

background: rgba(15, 23, 42, 0.92);

border-color: rgba(148, 163, 184, 0.28);

color: #e5e7eb;

}

body.dark-mode .back-home-button:hover {

background: rgba(37, 99, 235, 0.18);

color: #bfdbfe;

}

/* ==========================================================
   24. PROVINCE SIDEBAR GROUP
   Universal for all Canada province pages
========================================================== */

.province-sidebars {

    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;

    box-sizing: border-box;

}


/* ---------- Sidebar Cards ---------- */

.province-sidebars .sidebar-main-box,
.province-sidebars .canada-divisions {

    width: 100%;

    min-width: 0;

    max-width: 100%;

    margin-top: 0;

    box-sizing: border-box;

}


/* ---------- Universal Province Cities Grid ---------- */

.province-sidebars .province-cities-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;

    align-items: stretch;

    box-sizing: border-box;

}


/* ---------- Sidebar Description ---------- */

.sidebar-description {

    margin: 0 0 14px;

    color: #64748b;

    font-size: 0.90rem;

    line-height: 1.65;

    text-align: center;

}


/* ---------- Dark Mode ---------- */

body.dark-mode .sidebar-description {

    color: #9ca3af;

}


/* ==========================================================
   RESPONSIVE PROVINCE SIDEBARS
========================================================== */


/* ---------- Tablet ---------- */

@media (max-width: 960px) {

    .province-sidebars {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .province-sidebars .province-cities-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }

}


/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .province-sidebars .province-cities-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

    }


    .province-sidebars
    .province-cities-grid
    .division-link {

        min-height: 58px;

        padding: 9px 8px;

        font-size: 0.84rem;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width: 400px) {

    .province-sidebars .province-cities-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

    }


    .province-sidebars
    .province-cities-grid
    .division-link {

        min-height: 54px;

        padding: 8px 6px;

        font-size: 0.82rem;

    }

}

/* ==========================================================
25. GENERAL LINK ACCESSIBILITY
========================================================== */

.info-block a:focus-visible {

outline: 2px solid #2563eb;

outline-offset: 2px;

border-radius: 4px;

}

/* ==========================================================
26. TABLET
========================================================== */

@media (max-width: 960px) {

    .hero {

        padding-top: 20px;

    }


    .canada-sidebar .province-links,
    .canada-sidebar .explore-canada,
    .canada-sidebar nav {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }

}

/* ==========================================================
27. MOBILE
========================================================== */

@media (max-width: 640px) {

.hero {

    padding:
        18px 12px 32px;

    gap: 18px;

}


.card {

    padding: 16px 14px;

    border-radius: 16px;

}


.info-block {

    gap: 18px;

}

.canada-sidebar .province-links,
.canada-sidebar .explore-canada,
.canada-sidebar nav {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

}


.canada-sidebar .province-links a,
.canada-sidebar .explore-canada a,
.canada-sidebar nav a {

    min-height: 58px;

    padding: 9px 8px;

    font-size: 0.84rem;

}

/* ---------- Mobile Title ---------- */

.canada-title {

    width: 100%;

}


.canada-title .title-main {

    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    align-items: start;

    justify-content: center;

    gap: 10px;

    width: 100%;

    text-align: left;

    font-size: clamp(1.55rem, 7vw, 1.9rem);

}


.canada-title .flag-inline-title {

    width: 42px;
    height: auto;

    margin-top: 4px;

}


.canada-title .tz-small {

    margin-top: 8px;

}


/* ---------- Intro ---------- */

.info-text {

    font-size: 0.91rem;

    line-height: 1.72;

}


/* ---------- Main Clock ---------- */

.country-big-clock {

    padding: 18px 8px;

    background: none;

}


.country-time-value {

    font-size: clamp(2.5rem, 13vw, 3rem);

    letter-spacing: 0.04em;

}


.country-time-label {

    font-size: 0.86rem;

}


/* ---------- Meta ---------- */

.meta-row {

    grid-template-columns: 1fr;

    gap: 10px;

}


/* ---------- SEO ---------- */

.seo-text h2 {

    font-size: 1.2rem;

}


.seo-text p {

    font-size: 0.93rem;

    line-height: 1.8;

}


/* ---------- Related Searches ---------- */

.related-tags {

    gap: 8px;

}


.tag-item {

    flex:
        1 1 calc(50% - 8px);

}


.tag-item a {

    width: 100%;

    padding: 10px 12px;

    font-size: 0.85rem;

    box-sizing: border-box;

}


/* ---------- City Cards ---------- */

.cities {

    grid-template-columns: 1fr;

}


.city-card {

    background: #ffffff !important;

    background-image: none !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);

    transform: none !important;

}


body.dark-mode .city-card {

    background: #0f172a !important;

}


/* ---------- Accordion ---------- */

.info-toggle {

    padding: 16px 16px;

    font-size: 0.95rem;

}


.info-content {

    padding: 0 16px;

}


.info-section.active .info-content {

    padding:
        0 16px 18px;

}


.info-content p,
.info-content li {

    font-size: 0.91rem;

    line-height: 1.7;

}


.back-home-wrapper {

    padding:
        0 12px;

}

}
/* ==========================================================
28. SMALL PHONES
========================================================== */

@media (max-width: 400px) {

    .canada-title .title-main {

        grid-template-columns:
            36px minmax(0, 1fr);

        font-size: 1.5rem;

    }


    .canada-title .flag-inline-title {

        width: 36px;

    }


    .country-time-value {

        font-size: 2.35rem;

    }


    .tag-item {

        flex: 1 1 100%;

    }


    .province-links {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================
29. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}