/* ============================================================
   BAYT SALAM WEBSITE STYLES
   ============================================================

   BEGINNER-FRIENDLY NOTES

   HTML controls the WORDS and page structure.
   CSS controls the COLORS, spacing, fonts, sizes, and layout.

   Most common changes can be made in the section immediately below,
   called "EASY CUSTOMIZATION SETTINGS".

   CSS follows this basic pattern:

   .name-of-thing {
       property: value;
   }

   Example:
   .button {
       background: green;
   }

   IMPORTANT:
   - Keep the semicolon at the end of each line.
   - Keep the curly braces { } in place.
   - Colors beginning with # are color codes.
   - px means pixels.
   - rem is a scalable size unit.
   ============================================================ */


/* ============================================================
   EASY CUSTOMIZATION SETTINGS
   ============================================================
   Change these values to update the overall visual identity.

   COLOR GUIDE
   --cream: Main page background
   --paper: Lighter card/form background
   --brown: Main dark text and dark sections
   --brown-soft: Secondary text
   --green: Main accent and buttons
   --rust: Warm accent
   --line: Borders and dividers
   ============================================================ */

/* ---------- GLOBAL COLOR VARIABLES ---------- */
:root{--cream:#f7f1e8;--paper:#fff9f1;--ink:#2f241c;--muted:#745f4f;--olive:#66724a;--terra:#b66a45;--line:#e7d8c7;--shadow:0 18px 55px rgba(47,36,28,.12)}
/* ---------- BASIC RESET / CONSISTENCY ---------- */
*{box-sizing:border-box}html{scroll-behavior:smooth}/* ---------- WHOLE PAGE ---------- */
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Open Sans",sans-serif;line-height:1.65}img{display:block;max-width:100%}a{color:inherit}.section-shell{width:min(1120px,calc(100% - 40px));margin:auto}.narrow{width:min(780px,calc(100% - 40px));margin:auto}/* ---------- HEADER AND NAVIGATION ---------- */
.site-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;width:min(1120px,calc(100% - 40px));margin:auto}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-logo{width:52px;height:52px;object-fit:contain;flex:0 0 auto}.brand strong{display:block;font-family:Vollkorn,serif;font-size:22px;line-height:1}.brand small{display:block;margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.13em;text-transform:uppercase}.site-header nav{display:flex;align-items:center;gap:25px}.site-header nav a{text-decoration:none;font-weight:600;font-size:14px}.menu-toggle{display:none}.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:999px;background:var(--olive);color:white;text-decoration:none;padding:14px 23px;font:700 14px "Open Sans",sans-serif;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px);filter:brightness(.94)}.button-small{padding:10px 17px!important}/* ---------- HERO SECTION ---------- */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:68px 0 90px}.eyebrow{color:var(--terra);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.eyebrow.light{color:#e4b58e}.hero h1,h2{font-family:Vollkorn,serif;letter-spacing:-.025em;line-height:1.06}.hero h1{font-size:clamp(48px,6vw,72px);margin:16px 0 22px}.lead{font-size:19px;color:var(--muted);max-width:590px}.hero-actions{display:flex;align-items:center;gap:23px;margin-top:30px}.text-link{color:var(--olive);font-weight:700;text-decoration:none}.hero-image{height:570px;position:relative;margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}.hero-image img{width:100%;height:100%;object-fit:cover}.hero-image figcaption{position:absolute;left:22px;right:22px;bottom:22px;background:rgba(255,249,241,.93);padding:18px 20px;border-radius:18px;backdrop-filter:blur(9px)}.hero-image figcaption strong,.hero-image figcaption span{display:block}.hero-image figcaption span{font-size:13px;color:var(--muted);margin-top:3px}/* ---------- CENTRAL STORY STATEMENT ---------- */
.statement{background:var(--paper);padding:90px 0;text-align:center;border-block:1px solid var(--line)}.statement h2,.section-heading h2,.community-panel h2,.contact-panel h2{font-size:clamp(38px,5vw,52px);margin:14px 0 20px}.statement p:last-child,.section-heading>p:last-child{color:var(--muted);font-size:18px}.mission-section,.faq-section{padding:95px 0}.section-heading{max-width:760px;margin-bottom:38px}.section-heading.centered{text-align:center;margin:0 auto 42px}.card-grid{display:grid;gap:18px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:27px}.card .icon{color:var(--terra);font-weight:700;letter-spacing:.12em}.card h3,.feature-cards h3{font-family:Vollkorn,serif;font-size:25px;margin:12px 0 8px}.card p,.feature-cards p{color:var(--muted);margin:0}.home-section{background:var(--paper);padding:95px 0}.feature-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.feature-image{width:100%;height:540px;object-fit:cover;border-radius:28px}.feature-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-cards article{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:21px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}.gallery figure{margin:0;border-radius:20px;overflow:hidden;background:var(--cream);border:1px solid var(--line)}.gallery .wide{grid-column:span 2}.gallery img{height:300px;width:100%;object-fit:cover}.gallery figcaption{padding:13px 15px;color:var(--muted);font-size:13px}/* ---------- COMMUNITY SECTION ---------- */
.community-section{padding:95px 0}.community-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:35px;background:var(--ink);color:var(--paper);padding:38px;border-radius:32px}.community-panel p{color:#e7d8c7;font-size:16px}.community-panel .note{border-left:3px solid var(--terra);padding-left:15px}.community-panel img{width:100%;height:100%;min-height:470px;object-fit:cover;border-radius:23px}.faq-list{max-width:850px;margin:auto}.faq-list details{border-bottom:1px solid var(--line);padding:19px 3px}.faq-list summary{font-family:Vollkorn,serif;font-size:23px;font-weight:600;cursor:pointer}.faq-list p{color:var(--muted);max-width:750px}/* ---------- CONTACT FORM ---------- */
.contact-section{padding:45px 0 95px}.contact-panel{display:grid;grid-template-columns:.95fr 1.05fr;gap:35px;background:var(--ink);color:var(--paper);border-radius:32px;padding:38px}.contact-copy p,.contact-copy li{color:#e7d8c7}.contact-copy ul{padding-left:19px}.contact-panel form{background:var(--paper);color:var(--ink);padding:25px;border-radius:24px}.contact-panel label{display:block;font-weight:700;font-size:13px;margin-bottom:13px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.contact-panel input,.contact-panel textarea{width:100%;margin-top:6px;border:1px solid var(--line);background:#fffdf8;border-radius:12px;padding:12px 14px;font:400 14px "Open Sans",sans-serif;color:var(--ink)}.contact-panel textarea{resize:vertical}.contact-panel input:focus,.contact-panel textarea:focus{outline:2px solid rgba(102,114,74,.25);border-color:var(--olive)}.form-note{font-size:12px;color:var(--terra);margin:10px 0 0}footer{width:min(1120px,calc(100% - 40px));margin:auto;padding:35px 0 50px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--muted);font-size:13px}footer .brand{color:var(--ink)}
/* ============================================================
   TABLET LAYOUT
   Applies when the screen is 850px wide or smaller.
   This stacks sections that were side-by-side on desktop.
   ============================================================ */
@media(max-width:850px){.site-header{position:relative}.brand-logo{width:48px;height:48px}.menu-toggle{display:block;background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 14px}.site-header nav{display:none;position:absolute;z-index:10;top:78px;left:20px;right:20px;background:var(--paper);padding:18px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.site-header nav.open{display:flex}.hero,.feature-layout,.community-panel,.contact-panel{grid-template-columns:1fr}.hero{padding-top:35px}.hero-image{height:480px}.card-grid.three{grid-template-columns:1fr}.feature-cards{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}.gallery .wide{grid-column:span 2}footer{flex-direction:column;text-align:center}}
/* ============================================================
   PHONE LAYOUT
   Applies when the screen is 560px wide or smaller.
   Cards, gallery items, and form fields become single-column.
   ============================================================ */
@media(max-width:560px){.brand-logo{width:42px;height:42px}.section-shell{width:min(100% - 28px,1120px)}.site-header{width:calc(100% - 28px);height:74px}.brand strong{font-size:19px}.hero{gap:30px;padding-bottom:65px}.hero h1{font-size:clamp(38px,11vw,48px)}.lead{font-size:17px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-image{height:clamp(350px,105vw,430px)}.statement,.mission-section,.home-section,.community-section,.faq-section{padding:70px 0}.feature-cards,.gallery,.field-row{grid-template-columns:1fr}.gallery .wide{grid-column:span 1}.gallery img{height:270px}.community-panel,.contact-panel{padding:24px}.community-panel img{min-height:330px}footer{width:calc(100% - 28px)}}

/* Responsive hardening */
body{overflow-x:hidden}
.brand{min-width:0}.brand span:last-child{min-width:0}
.brand strong,.brand small{white-space:nowrap}
.hero-copy,.section-heading,.contact-copy,.community-panel>div{min-width:0}
/* ============================================================
   SMALL PHONE LAYOUT
   Applies to very narrow phones.
   This slightly reduces text sizes, spacing, and logo size.
   ============================================================ */
@media(max-width:420px){.site-header{gap:10px}.brand{gap:8px}.brand strong{font-size:18px}.brand small{font-size:9px;letter-spacing:.1em}.menu-toggle{padding:8px 12px}.hero-image figcaption{left:14px;right:14px;bottom:14px;padding:14px}.statement h2,.section-heading h2,.community-panel h2,.contact-panel h2{font-size:36px}.card,.feature-cards article{padding:20px}}


/* ============================================================
   COMMON BEGINNER EDITS
   ============================================================

   CHANGE BUTTON COLOR:
   Search for ".button" or ".primary-button" and change
   background: var(--green);

   CHANGE MAIN HEADING FONT SIZE:
   Search for ".hero h1"

   MAKE PHOTOS MORE OR LESS ROUNDED:
   Search for "border-radius" near the relevant image selector.

   CHANGE PAGE WIDTH:
   Search for "max-width". A larger number makes content wider.

   CHANGE MOBILE BREAKPOINTS:
   Search for:
   @media(max-width:850px)
   @media(max-width:560px)
   @media(max-width:420px)

   Usually, you should not need to edit the breakpoints.
   ============================================================ */