/* layouts/header.php and footer.php are written for Tailwind (assets/css/tailwind.css). The hotel pages also load
   Bootstrap (injected by theme/main.js), which restyles them. This file, loaded after main.js, puts back what Tailwind
   gives the header and footer: its preflight, and the utilities Bootstrap redefines with other values. */

body {
    background-color: var(--page-bg);
}

:where(#site-header, footer) {
    color: hsl(var(--foreground));
    font-family: IRANYekanXFaNum, sans-serif;
}

:where(#site-header, footer) a,
:where(#site-header, footer) a:hover {
    color: inherit;
    text-decoration: inherit;
}

:where(#site-header, footer) :is(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

:where(#site-header, footer) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, hr, figure, blockquote, pre) {
    margin: 0;
}

:where(#site-header, footer) :is(ul, ol) {
    list-style: none;
    padding: 0;
}

:where(#site-header, footer) .container {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (min-width: 1400px) {
    :where(#site-header, footer) .container { max-width: 1400px; }
}

/* Bootstrap's utilities are !important and its RTL build adds [dir="rtl"] .px-4 and the like, more specific than any
   selector below. An !important declaration in a layer beats an unlayered one whatever its specificity. */
@layer shared-layout {
    :where(#site-header, footer) .px-3 { padding-left: .75rem !important; padding-right: .75rem !important; }
    :where(#site-header, footer) .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    :where(#site-header, footer) .pr-8 { padding-right: 2rem !important; }
    :where(#site-header, footer) .pb-3 { padding-bottom: .75rem !important; }
    :where(#site-header, footer) .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    :where(#site-header, footer) .mb-3 { margin-bottom: .75rem !important; }
    :where(#site-header, footer) .mb-4 { margin-bottom: 1rem !important; }
    :where(#site-header, footer) .gap-3 { gap: .75rem !important; }
    :where(#site-header, footer) .bg-primary { background-color: hsl(var(--primary)) !important; }
    :where(#site-header, footer) .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / .9) !important; }
    :where(#site-header, footer) .text-primary { color: hsl(var(--primary)) !important; }
    #site-header.shadow-lg,
    :where(#site-header, footer) :is(.shadow-sm, .shadow-lg, .hover\:shadow-sm:hover, .hover\:shadow-xl:hover) {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    }

    @media (min-width: 768px) {
        :where(#site-header, footer) .md\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
        :where(#site-header, footer) .md\:mb-0 { margin-bottom: 0 !important; }
    }

    @media (min-width: 1024px) {
        :where(#site-header, footer) .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }
}