/* ==========================================================================
   ABOUT UTTARAKHAND — SITE SHELL AND COMPONENT LAYOUT
   File: au.css

   Typography, font properties, text formatting and text colors are owned by
   au-typography.css. This file contains layout, surfaces, borders, spacing,
   backgrounds and component behavior only.
   ========================================================================== */

/*
--------------------------------------------------------------------------------
File Name : au.css
Path      : root/assets/css/
Purpose   : CSS File
--------------------------------------------------------------------------------
*/
:root {

    /* =========================================================
       ABOUT UTTARAKHAND — BRAND THEME
       Based on logo colors
       ========================================================= */

    /* ---------------------------------------------------------
       Base
       --------------------------------------------------------- */
    --au-body-bg: #ffffff;
    --au-surface: #ffffff;

    /* ---------------------------------------------------------
       Brand Colors
       --------------------------------------------------------- */
    /* Uttarakhand Red */
    --au-primary: #c90000;
    --au-primary-dark: #a80000;
    /* About Uttarakhand Dark Plum */
    --au-secondary: #241128;
    --au-secondary-dark: #180b1d;
    /* ---------------------------------------------------------
       Accent / Sections
       --------------------------------------------------------- */
    --au-accent: #c90000;
    --au-section-alt: #f7f4f6;
    --au-border: #e4dde5;
    /* ---------------------------------------------------------
       Header
       --------------------------------------------------------- */
    --au-header-bg: #ffffff;
    /* ---------------------------------------------------------
       Footer
       --------------------------------------------------------- */
    --au-footer-bg: #241128;
    --au-footer-text: #f4eef5;
    /* ---------------------------------------------------------
       Shape
       --------------------------------------------------------- */
    --au-radius: 0;
}

html {
    scroll-behavior: smooth;}

body {

    background: var(--au-body-bg);
    }

.container {
    max-width: 1320px;}

.au-contact-bar {
    background: var(--au-primary-dark);

    border-bottom: 1px solid rgba(255, 255, 255, .12);}

.au-contact-bar .container {
    min-height: 38px;}

.au-social-links {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
}

.au-social-links a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    padding: 0 !important;

}

.au-header {
    background: var(--au-header-bg);
    border-bottom: 1px solid var(--au-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(10px);}

.au-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.au-brand img {
    display: block;
    width: 300px;
    height: auto;
}

.au-nav .nav-link {

    padding: .8rem .65rem;}

.au-hero {
    min-height: 620px;
    display: flex;
    align-items: end;
    position: relative;
    background: linear-gradient(135deg, #f0e8ed, #241128);
    overflow: hidden;}

.au-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .7));}

.au-hero__content {
    position: relative;

    padding: 6rem 0 5rem;
    max-width: 820px;}

.au-section {
    padding: 5rem 0;}

.au-section--alt,
.au-listing-hero {
    background: var(--au-section-alt);}

.au-section__head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;}

.au-card {
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 28px rgba(36, 17, 40, .05);
    transition: .2s;}

.au-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(36, 17, 40, .10);}

.au-card__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #eadfe5, #8f6f7f 50%, #f1e7eb);
}

.au-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.au-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.au-card__body {
    padding: 1.25rem;}

.au-feature {
    border-radius: 0;
    overflow: hidden;
    min-height: 430px;
    background: #fff;
    border: 1px solid var(--au-border);}

.au-feature__image {
    min-height: 430px;
    background: linear-gradient(135deg, #eadfe5, #3b1d43);
    display: flex;
    align-items: center;
    justify-content: center;

    }

.au-feature__body {
    padding: 3rem;}

.au-facts,
.au-info,
.au-toc {
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: 0;
    padding: 1.25rem;}

.au-fact {
    padding: 1rem;
    border-right: 1px solid var(--au-border);}

.au-breadcrumb {
    padding: 1rem 0;

    }

.au-page-header {
    padding: 4rem 0 2rem;}

.au-content {
    max-width: 900px;}

.au-person-image {
    margin: 0 0 3.5rem;}

.au-photo {
    width: 100%;
    min-height: 520px;
    background: linear-gradient(135deg, #bda9b8, #241128);
    display: flex;
    align-items: center;
    justify-content: center;

    }

.au-person-content {
    width: 100%;
    max-width: 920px;}

.au-person-content p {

    max-width: 900px;}

.au-footer {
    background: var(--au-footer-bg);

    padding: 4rem 0 2rem;}

.au-subscribe-form .form-control {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    min-height: 46px;}

.au-subscribe-form__button {
    border-radius: 0;
    background: #fff;

    border: 1px solid #fff;
    }

.au-subscribe-form__button:hover {
    background: var(--au-section-alt);
    }

.au-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 2rem;
    padding-top: 1rem;
    }

*,
*::before,
*::after {
    border-radius: 0 !important;}

@media(max-width:991px) {
    .au-nav .nav-link {
        padding: .45rem 0;}

    .au-hero {
        min-height: 540px;}

    .au-fact {
        border-right: 0;
        border-bottom: 1px solid var(--au-border);}
}

@media(max-width:575px) {
    .au-contact-bar .container {
        padding-top: .45rem;
        padding-bottom: .45rem;}

    .au-section {
        padding: 3.5rem 0;}

    .au-hero__content {
        padding: 4rem 0 3rem;}

    .au-section__head {
        display: block;}

    .au-social-links {
        gap: .75rem;}

    .au-photo {
        min-height: 360px;}

    .au-brand img {
        width: 230px;
    }
}


/* BEM text-block layout; text styling is owned by au-typography.css. */
.au-listing-hero__kicker,
.au-page-header__kicker {
    display: block;
}

/* BEM primary button surface; typography is owned by au-typography.css. */
.au-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.25rem;
    border: 1px solid var(--au-primary);
    background: var(--au-primary);
}

.au-btn--primary:hover,
.au-btn--primary:focus-visible {
    background: var(--au-primary-dark);
    border-color: var(--au-primary-dark);
}

/* BEM feature badge surface; font rules are owned by au-typography.css. */
.au-feature__badge {
    display: inline-block;
    padding: .3rem .6rem;
    background: var(--au-primary);
}

/* ============================================================
   ABOUT UTTARAKHAND — NO ROUNDED CORNERS
   This must remain the LAST CSS rule.
   ============================================================ */

.au-card,
.au-card__image,
.au-card__body,
.au-feature,
.au-feature__image,
.au-feature__body,
.au-facts,
.au-info,
.au-toc,
.au-photo,
.au-photo-placeholder,
.au-recipe-meta,
.au-category-nav a,
.au-btn,
.au-subscribe-form,
.au-subscribe-form input,
.au-subscribe-form__button,
.form-control,
.form-select,
.btn,
.card,
.card-img,
.card-img-top,
.navbar-toggler,
.alert,
.badge,
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.rounded-pill,
.rounded-circle {
    border-radius: 0 !important;
}

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* ============================================================
   ABOUT UTTARAKHAND — BRAND COLOR ENFORCEMENT
   Dark plum + Uttarakhand red only. No green.
   ============================================================ */

.au-contact-bar {
    background: var(--au-secondary) !important;
}

.au-hero {
    background: linear-gradient(135deg, #7d6174, #241128) !important;
}

.au-card__image,
.au-feature__image,
.au-photo {
    background: linear-gradient(135deg, #eadfe5, #8f6f7f, #3b1d43) !important;
}

.au-footer {
    background: var(--au-secondary) !important;
}


/* ==========================================================================
   SHARED CONTENT ALIGNMENT
   Header, hero text, page content and footer use the same Bootstrap container
   boundary. Typography remains exclusively in au-typography.css.
   ========================================================================== */
:root {
    --au-layout-content-width: 1320px;
    --au-layout-gutter: 12px;
}

/* Keep the site's standard container as the alignment reference. */
.container {
    max-width: var(--au-layout-content-width);
}

/* Category pages have no article sidebar or narrow reading column. */
.au-category-content .au-content {
    width: 100%;
    max-width: none;
}