/* site.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background-color: #003366;
    color: white;
    padding: 10px 0;
    padding-left: 5px;
}
/* Page title band (the blue bar with the page's title, e.g. "Contact Us"): smaller text, lined up with the logo
   and the page content instead of sitting against the left edge. */
article.content-item > header {
    padding: 0.6rem 0;
}

article.content-item > header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 auto;
    max-width: 1140px;
    padding: 0 15px;
}

html, body {
    overflow-x: hidden; /* prevent horizontal scrolling */
}

footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
}

.container {
    max-width: 1140px;
    margin: auto;
    padding: 0 15px;
}

.widget-body {
    max-width: 1140px;
    margin: auto;
}
.my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

main .my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.col-md-offset-4 {
	margin-left:1.5rem;	
	margin-right:1.5rem;	
}

.form-horizontal {
	padding:20px;	
    max-width:400px;
}
.auth-form {
   padding: 20px;
   max-width:400px;   
   margin-left: auto;  /* Pushes form to the right */
   margin-right: 0;    /* Ensures no margin on right */
}

/* Target col-md-6 only when it contains or is near auth-form */
.col-md-6:has(form.auth-form),
.col-md-6:has(section form[action*="ExternalLogin"]) {
    /* BEFORE: Bootstrap default is width: 50% */
    /* AFTER: Your custom width */
    width: 40% !important;
}

/* Or target both columns when auth-form exists on the page */
body:has(form.auth-form) .col-md-6 {
    width: 48% !important;
    flex: 0 0 auto !important;
}

.image-box {
    width: 100%;
    padding-top: 75%; /* controls height ratio */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-box.tall {
    height: 420px;
}

.image-box.small {
    height: 200px;
}

.image-box.wide {
    height: 200px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    header h3 {
        font-size: 1.5rem;
    }
}


/* menu  */
.category-container {
    margin-bottom: 1rem;
}

.subcategory-container {
    margin-bottom: 0.75rem;
    padding-left: 1rem; /* will only apply to subcategories */
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Category & Subcategory */
.category-header {
    cursor: pointer;
    border-bottom: 2px solid #000;
    font-size: 1rem; /* smaller than h2 default */
    font-weight: 600;
    margin: 0.5rem 0;
}

.subcategory-header {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0.25rem 0;
    color: #333;
}

/* Items layout */
.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 0.5rem 0;
    flex-wrap: wrap; /* makes it responsive */
}

.item-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.item-name {
    font-weight: bold;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-price {
    font-size: 0.85rem;
    color: #555;
}

.item-button {
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    margin-top: 0.25rem; /* works if it wraps on small screens */
    flex-shrink: 0;
}
/* Example to style Orchard menu like Bootstrap nav */
.navbar-nav li {
    list-style: none;
    margin-right: 1rem;
}

.navbar-nav li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
}

.navbar-nav li a:hover {
    background-color: rgba(255,255,255,0.1);
    border-radius: 0.25rem;
}
/* Mobile tweaks */
@media (max-width: 768px) {
    .category-header {
        font-size: 0.9rem;
    }

    .subcategory-header {
        font-size: 0.8rem;
    }
}

/* ---- Orchard's own pages (forgot password, login, register...) ----------------------------------------------
   Their markup puts headings, paragraphs and forms straight under <main>, with no container, so the text sat against
   (and was clipped by) the left edge of the screen. Give them the same width and side padding as the rest of the site. */
main > h1, main > h2, main > h3, main > h4, main > p, main > form, main > ul, main > ol,
main > .alert, main > .validation-summary-errors, main > .text-danger, main > .field-validation-error {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* ---- Footer ---------------------------------------------------------------------------------------------------
   The page footer's own content (Privacy Policy / Terms of Use / copyright) sits in a nested <footer>, which picked up the
   light grey "footer" rule above and showed white copyright text on a near-white box. Let it take the footer's colour. */
footer footer,
footer .widget-body,
footer .bg-light,
footer .bg-white {
    background: transparent !important;
    color: #ffffff;
}
footer footer a,
footer .widget-body a {
    color: #ffffff;
}

/* ---- Header buttons (My account / Log out / Order Now) ------------------------------------------------------------
   "My account" wrapped onto two lines and came out taller than "Log out". Keep the text on one line and give the small
   header buttons the same height. */
header .btn,
header .btn-sm {
    white-space: nowrap;
    line-height: 1.4;
    padding: 0.4rem 0.9rem;
    display: inline-flex;
    align-items: center;
}

/* The checkout page has its own page-wide "button { margin-top: 15px; display: block; ... }" rule. It must not touch the
   header's buttons (it pushed "Log out" 15px below "My account", which is a link). */
header button,
header button.btn,
header .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.4rem 0.9rem !important;
    line-height: 1.4;
}

/* The rule above forces display:inline-flex !important on every header button, which also un-hid the mobile-only
   "Order Now" and the menu (hamburger) button on desktop. Hide them again with a selector that outranks it. */
@media (min-width: 992px) {
    header .btn.order-now-mobile,
    header button.navbar-toggler {
        display: none !important;
    }
}

/* ---- Header logo ---------------------------------------------------------------------------------------------------
   Bigger than before (it was 40px tall, hard to read). The shop's name is the logo's alt text, not extra text beside it. */
.site-logo {
    max-height: 64px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .site-logo {
        max-height: 52px;
        max-width: 170px;
    }
}