@import url("bottom_nav.css?v=1");
@import url("partners.css?v=2");
@import url("close_brands.css?v=1");

/* ================================================================
   OneHaveri — Main Page Layout Foundation
   ----------------------------------------------------------------
   Page-level layout only.

   This file intentionally does NOT style individual widgets/components.
   Component CSS belongs with the component (for example partners.css,
   bottom_nav.css). Larger future components may receive their own file.

   PHASE 4A
   --------
   Responsive page geometry is fluid across phones, tablets and
   laptops/desktops. Mobile is the primary audience, but the layout is
   deliberately not mobile-constrained.
   ================================================================ */

:root{
  /* OneHaveri page palette shared by page-level and component styles.
     Direction: "Kempu Mannu / Red Soil & Fields" -- Haveri's laterite
     soil and monsoon-green farmland, on a manila-parchment base. */
  --cream:#F2E8D8;
  --cream-deep:#EBE0CC;
  --card:#F8F1E3;
  --card-warm:#F3E2C4;
  --gold:#B98429;
  --gold-soft:#D9A13F;
  --terracotta:#9C4A2E;
  --terracotta-deep:#7C3B22;
  --terracotta-light:#B36A45;
  --ink:#2E2117;
  --muted:#5B4A38;
  --olive:#3F5B3E;
  --line:rgba(46,33,23,.10);

  /* Typography: Noto Serif Kannada for Kannada copy (loaded as a
     webfont -- see the Google Fonts link in each page's <head>), Lora
     for English display/editorial voice, Work Sans for small UI text. */
  --font-kannada:"Noto Serif Kannada","Nirmala UI","Tunga",serif;
  --font-display:"Lora",Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-ui:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* Fluid type scale -- these ranges genuinely keep growing through
     tablet and desktop widths, unlike a scale that maxes out at phone
     sizes. Local page styles should reference these instead of
     hand-rolling their own one-off clamp() ranges. */
  --fs-hero:clamp(24px,4.2vw,40px);
  --fs-tagline:clamp(15px,2.1vw,19px);
  --fs-intro:clamp(13px,1.6vw,16px);
  --fs-card-title:clamp(15px,1.8vw,18px);
  --fs-card-body:clamp(12px,1.3vw,14px);
  --fs-eyebrow:clamp(11px,1vw,12.5px);

  --radius-card:16px;
  --radius-pill:999px;
  --shadow-card:0 6px 18px rgba(46,33,23,.06);

  /* Responsive page geometry. This is a desktop-capable canvas, not a
     phone-sized wrapper. The max is a readability boundary only; the
     page itself remains width:100% and can shrink naturally below it. */
  --page-max-width:1440px;
  --page-gutter:clamp(16px,3vw,48px);
}


/* ----------------------------------------------------------------
   DOCUMENT BASE
   ---------------------------------------------------------------- */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--cream);
}

body{
  font-family:var(--font-ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}


/* ----------------------------------------------------------------
   MAIN PAGE SHELL
   ----------------------------------------------------------------
   Important design decision:

   - Width is fluid, not phone-sized.
   - The page can use a wider desktop canvas up to the readability cap.
   - Height is content-driven, not locked to one viewport.
   - min-height only makes short pages fill the visible screen.
   - There is no fixed height, so additional sections can grow the page.
   - Normal document overflow is preserved so the page can scroll.
   - Bottom navigation clearance remains the responsibility of
     bottom_nav.css; it is deliberately not duplicated here.
   ---------------------------------------------------------------- */

.page{
  width:100%;
  max-width:var(--page-max-width);
  min-height:100svh;
  height:auto;
  margin:0 auto;
  padding:
    max(10px,env(safe-area-inset-top))
    var(--page-gutter)
    max(10px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.5vw,16px);
  position:relative;
  overflow:visible;
  background:var(--cream);
}


/* ----------------------------------------------------------------
   PAGE BACKGROUND DECORATION
   ---------------------------------------------------------------- */

.dawn{
  position:absolute;
  inset:-10% -5% auto -5%;
  width:110%;
  height:62%;
  background:
    radial-gradient(58% 60% at 50% 0%,rgba(185,132,41,.45),transparent 68%),
    radial-gradient(85% 50% at 50% 0%,rgba(224,188,120,.28),transparent 75%);
  pointer-events:none;
}


/* ----------------------------------------------------------------
   RESPONSIVE PAGE GEOMETRY
   ----------------------------------------------------------------
   There is intentionally no mobile-only width rule here. The same
   fluid shell is used from narrow phones through large screens.
   Desktop adjustments change spacing only; they do not introduce a
   second layout system.
   ---------------------------------------------------------------- */

@media (min-width:769px){
  .page{
    gap:clamp(12px,1.5vw,20px);
  }
}

@media (min-width:1200px){
  .page{
    --page-gutter:clamp(32px,4vw,56px);
  }
}


/* ----------------------------------------------------------------
   HOMEPAGE HERO — MOBILE-FIRST BANNER SYSTEM
   ----------------------------------------------------------------
   The banner uses `contain`, not `cover`, so the source artwork is
   never cropped on narrow mobile screens. The aspect ratio reserves
   space before the image paints and prevents layout shift.

   The image list is intentionally CSS-driven for this first rollout:
   adding a fourth/fifth banner later only requires extending the
   animation sequence or moving this behavior into a dedicated JS
   banner controller.
   ---------------------------------------------------------------- */

.hero{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(63,91,62,.18);
  border-radius:clamp(14px,2.2vw,24px);
  background:var(--cream-deep);
  box-shadow:0 10px 30px rgba(46,33,23,.08);
  text-align:left;
  padding:0;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:var(--cream-deep);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  animation:onehaveriBannerRotation 24s infinite;
}

.hero::after{
  content:"";
  position:absolute;
  z-index:2;
  top:clamp(10px,2.5vw,28px);
  left:clamp(10px,2.5vw,28px);
  width:clamp(92px,22%,230px);
  aspect-ratio:1;
  background:url("logo1.png") center / contain no-repeat;
  filter:drop-shadow(0 3px 8px rgba(46,33,23,.18));
  pointer-events:none;
}

@keyframes onehaveriBannerRotation{
  0%,28%{background-image:url("banner1.png")}
  33%,61%{background-image:url("banner2.png")}
  66%,94%{background-image:url("banner3.png")}
  100%{background-image:url("banner1.png")}
}

/* Keep the existing semantic hero copy available to search engines and
   assistive technology, while the visual banner carries the identity. */
.hero > .status{
  position:absolute;
  top:clamp(10px,2.5vw,28px);
  right:clamp(10px,2.5vw,28px);
  z-index:3;
  margin:0;
  padding:5px 10px;
  border:1px solid rgba(156,74,46,.18);
  background:rgba(248,241,227,.88);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.hero > .hero-heading,
.hero > .tagline{
  position:absolute;
  z-index:3;
  left:clamp(10px,3vw,34px);
  right:clamp(10px,3vw,34px);
  max-width:none;
  text-align:left;
  text-shadow:0 1px 8px rgba(255,255,255,.65);
}

.hero > .hero-heading{
  bottom:clamp(34px,8vw,90px);
  margin:0;
  font-size:clamp(17px,3.4vw,34px);
  line-height:1.2;
  color:var(--ink);
}

.hero > .tagline{
  bottom:clamp(13px,3.2vw,36px);
  margin:0;
  justify-content:flex-start;
  font-size:clamp(11px,1.8vw,18px);
  color:var(--terracotta-deep);
}

.hero > .divider,
.hero > .intro{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  .hero::before{
    animation:none;
    background-image:url("banner1.png");
  }
}

/* ----------------------------------------------------------------
   POSTS GROUP — compact, readable and clearly related
   ---------------------------------------------------------------- */

.ideas{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(6px,1vw,10px);
  padding:clamp(8px,1.4vw,14px);
  border:1px solid rgba(185,132,41,.10);
  border-radius:var(--radius-card);
  background:var(--cream-deep);
}

.ideas::before{
  content:"ನಮ್ಮ ಮಾತುಗಳು  •  Posts";
  grid-column:1 / -1;
  margin:0 2px 1px;
  color:var(--olive);
  font-family:var(--font-kannada);
  font-size:clamp(12px,1.6vw,16px);
  font-weight:700;
  line-height:1.25;
}

.card{
  padding:clamp(8px,1.1vw,12px) clamp(6px,1vw,10px);
  border-radius:12px;
}

@media (max-width:600px){
  .hero{
    border-radius:14px;
  }

  .hero > .hero-heading{
    bottom:38px;
    font-size:clamp(15px,4.5vw,22px);
    max-width:78%;
  }

  .hero > .tagline{
    bottom:13px;
    font-size:clamp(10px,3vw,13px);
    max-width:82%;
  }

  .ideas{
    grid-template-columns:1fr;
    gap:6px;
    padding:8px;
  }

  .ideas::before{
    font-size:13px;
    margin-bottom:2px;
  }

  .card{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-areas:
      "icon title"
      "icon copy";
    column-gap:8px;
    align-items:center;
    padding:8px 9px;
    text-align:left;
  }

  .card .icon{
    grid-area:icon;
    width:28px;
    height:28px;
    margin:0;
  }

  .card h2{
    grid-area:title;
    margin:0 0 2px;
    font-size:13px;
  }

  .card p{
    grid-area:copy;
    font-size:10px;
    line-height:1.3;
  }
}