/*
Theme Name:   Realm Network (Astra Child)
Theme URI:    https://realmnetwork.com.au
Description:  Child theme of Astra for the Realm Network website. Holds brand tokens, fonts and the custom styles used by the Elementor layouts (classes prefixed rn-).
Author:       Mohiul Islam Rony
Template:     astra
Version:      1.6.0
Text Domain:  realm-astra-child
*/

/* ---------- Brand tokens ---------- */
:root{
  --rn-teal:#1B3A41;
  --rn-slate:#536569;
  --rn-cream:#F8F1E8;
  --rn-sand:#F1E5D6;
  --rn-peach:#FBE3D6;
  --rn-peach-deep:#F2B9A0;
  --rn-bronze:#7E5F27;
  --rn-line:#E6DACB;
  --rn-teal-muted:#A9BDC1;
  --rn-teal-line:#2F5058;
  --rn-coral:#E0532B;
  --rn-input:#7F8F92;
  --rn-serif:"PT Serif",Georgia,serif;
  --rn-sans:"Blinker",system-ui,sans-serif;
  --rn-shadow:0 20px 48px -12px rgba(27,58,65,.14);
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--rn-cream);color:var(--rn-slate);font-family:var(--rn-sans);}
/* Text selection in brand colours (replaces the browser's default blue) */
::selection{background:var(--rn-peach-deep);color:var(--rn-teal)}
::-moz-selection{background:var(--rn-peach-deep);color:var(--rn-teal)}
/* Astra scroll-to-top button in brand teal */
#ast-scroll-top{background-color:var(--rn-teal)!important;color:var(--rn-cream)!important;border-radius:999px}
.elementor p:last-child{margin-bottom:0}
.elementor p{margin-bottom:0}

/* ---------- Section labels (small caps + hollow coral dot) ---------- */
.rn-label .elementor-heading-title{display:inline-flex;align-items:center;gap:10px}
.rn-label .elementor-heading-title::before{content:"";width:7px;height:7px;border:1.3px solid var(--rn-coral);border-radius:50%;flex:none}
.rn-label.rn-dark .elementor-heading-title::before{border-color:var(--rn-peach-deep)}
.rn-label.rn-center .elementor-heading-title{justify-content:center}

/* ---------- Headings with italic emphasis ---------- */
.rn-h em{font-style:italic;font-weight:400}
.rn-hero-h em{color:var(--rn-bronze)}
.rn-lead{max-width:560px}
.rn-lead p{max-width:560px}
/* keep the floating card clear of the intro text on mid-size screens */
@media (min-width:1025px) and (max-width:1400px){.rn-lead p{max-width:520px}}

/* ---------- Buttons ---------- */
.rn-btn .elementor-button{transition:background-color .2s,color .2s,border-color .2s}
.rn-btn .elementor-button-icon{transform:rotate(-45deg);transition:transform .2s}
.rn-btn .elementor-button:hover .elementor-button-icon{transform:rotate(-45deg) translateX(3px)}
.rn-btn-primary .elementor-button-icon svg,.rn-btn-primary .elementor-button-icon i{fill:var(--rn-peach-deep);color:var(--rn-peach-deep)}
.rn-btn-secondary .elementor-button-icon svg,.rn-btn-secondary .elementor-button-icon i,
.rn-btn-link .elementor-button-icon svg,.rn-btn-link .elementor-button-icon i{fill:var(--rn-coral);color:var(--rn-coral)}
.rn-btn-sm .elementor-button{padding:12px 22px!important}
/* same 1px border on every button so filled and outlined buttons are the same height */
.rn-btn-primary .elementor-button{border:1px solid transparent}
.rn-more{margin-top:auto!important}

/* ---------- Header ---------- */
/* Elementor sets position:relative on containers, so the sticky header needs the stronger selector */
.elementor .e-con.rn-header{position:sticky!important;top:var(--wp-admin--admin-bar--height,0px);z-index:50;transition:box-shadow .3s ease}
.elementor .e-con.rn-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(27,58,65,.35)}
@media (max-width:600px){.elementor .e-con.rn-header{top:0}}
.rn-nav .elementor-icon-list-icon{display:none!important}
.rn-links .elementor-icon-list-item a{transition:color .2s}
.rn-nav .elementor-icon-list-item{position:relative}
.rn-nav .elementor-icon-list-item::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--rn-coral);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rn-nav .elementor-icon-list-item:hover::before,.rn-nav .elementor-icon-list-item.is-active::before{transform:scaleX(1)}
.rn-nav .elementor-icon-list-item.is-active .elementor-icon-list-text{color:var(--rn-bronze)}
.rn-underline .elementor-icon-list-text{text-decoration:underline;text-underline-offset:3px}

/* ---------- Hero ---------- */
.rn-hero{position:relative;overflow:hidden}
/* Elementor uses ::before on containers for its background overlay, so the curve needs higher specificity */
.elementor .e-con.rn-hero::before{content:""!important;display:block!important;position:absolute!important;inset:0 0 auto auto!important;width:62.5%!important;height:100%!important;background:var(--rn-cream)!important;border-top-left-radius:600px!important;opacity:1!important;mix-blend-mode:normal!important;z-index:0!important;pointer-events:none}
.elementor .e-con.rn-hero>.e-con-inner{position:relative;z-index:1}
.rn-hero-visual{position:relative}
.rn-hero-img img{display:block;will-change:transform;transition:transform .1s linear}
.rn-hero-img .elementor-widget-container{overflow:hidden;border-radius:28px}
.rn-expect{position:absolute!important;left:-72px;bottom:48px;width:360px!important;max-width:calc(100% + 72px);z-index:2}
.rn-chip{position:absolute!important;right:28px;top:40px;width:auto!important;z-index:2}
/* icon box exactly as tall as the circle so it centres on the text line */
.rn-chip .rn-icon,.rn-chip .rn-icon .elementor-widget-container,.rn-chip .elementor-icon-wrapper{line-height:0;display:flex;align-items:center}
.rn-chip .elementor-icon{display:inline-flex;align-items:center;justify-content:center}

/* ---------- Cards ---------- */
.rn-card{transition:transform .25s ease,box-shadow .25s ease}
.rn-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(27,58,65,.35)}
.rn-icon .elementor-icon{line-height:1}
.rn-linked a{color:var(--rn-bronze);text-decoration:underline;text-underline-offset:3px}
.rn-approach-intro{max-width:380px}
.rn-portrait img{display:block;object-position:center top;background:linear-gradient(160deg,#F6EDE3 0%,#EBDCCB 100%)}
.rn-legal strong{color:var(--rn-cream);font-weight:600}

/* ---------- Enquiry form (placeholder until a form plugin is connected) ---------- */
.rn-form{display:flex;flex-direction:column;gap:18px;font-family:var(--rn-sans)}
.rn-form h3{margin:0 0 4px;font-family:var(--rn-serif);font-weight:400;font-size:26px;color:var(--rn-teal)}
.rn-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--rn-teal)}
.rn-form .rn-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rn-form input[type=text],.rn-form input[type=tel],.rn-form input[type=email],.rn-form select,.rn-form textarea{
  font:400 17px/1.4 var(--rn-sans);color:var(--rn-teal);background:#fff;border:1px solid var(--rn-input);border-radius:12px;padding:12px 14px;min-height:48px;width:100%;box-shadow:none}
.rn-form textarea{min-height:120px;resize:vertical}
.rn-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:48px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231B3A41' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/16px 16px}
.rn-form input:focus,.rn-form select:focus,.rn-form textarea:focus{outline:none!important;border-color:var(--rn-bronze)!important;box-shadow:0 0 0 4px rgba(242,185,160,.35)!important;transition:border-color .2s,box-shadow .2s}
.rn-form input[type=checkbox]:focus-visible{outline:2px solid var(--rn-peach-deep);outline-offset:2px;box-shadow:none!important}
.rn-form .rn-consent{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;font-size:15px;color:var(--rn-slate)}
.rn-form .rn-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--rn-teal);flex:none}
.rn-form .rn-consent a{color:var(--rn-bronze);text-decoration:underline}
.rn-form button{font:600 13px/1 var(--rn-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rn-cream);background:var(--rn-teal);border:0;border-radius:999px;padding:18px 28px;cursor:pointer;transition:background-color .2s}
.rn-form button:hover{background:#24505A}
.rn-form .rn-note{margin:0;text-align:center;font-size:14px;color:var(--rn-slate)}

/* ---------- Footer ---------- */
.rn-logo,.rn-logo .elementor-widget-container{text-align:left!important}
.rn-logo img{margin:0!important}
.rn-links .elementor-icon-list-items{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px 28px;margin:0!important}
/* Elementor gives inline lists negative side margins; we space with gap instead */
.rn-links .elementor-icon-list-item{margin:0!important;padding:0!important}
.rn-links .elementor-icon-list-item::after{display:none!important}
.rn-footer .rn-links .elementor-icon-list-items{flex-direction:column!important;align-items:flex-end;gap:12px}
/* the footer's rounded top-right corner scales with the screen and the links keep clear of it */
.elementor .e-con.rn-footer{border-radius:0 clamp(80px,14vw,240px) 0 0!important}
@media (min-width:768px) and (max-width:1560px){.rn-footer .rn-links{padding-right:clamp(32px,6vw,88px)}}
.rn-links .elementor-icon-list-item{white-space:nowrap}
.rn-footer .rn-links{flex-shrink:0}
.elementor .e-con.rn-header>.e-con-inner{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important}

/* ---------- Header layout: logo | centred nav | actions ---------- */
.elementor .e-con.rn-hd-side{flex:1 1 0!important;width:auto!important;min-width:0}
.elementor .e-con.rn-hd-right>.e-con-inner,.elementor .e-con.rn-hd-right{justify-content:flex-end!important}
.rn-nav{flex:0 0 auto!important;width:auto!important}
.rn-nav .elementor-icon-list-items{justify-content:center}

/* ---------- Mobile menu ---------- */
.rn-burger-wrap{width:auto!important}
.rn-burger,.rn-burger:hover,.rn-burger:focus{display:none;width:44px;height:44px;padding:0!important;border:1px solid var(--rn-line)!important;border-radius:999px!important;background:#fff!important;box-shadow:none!important;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.rn-burger:focus-visible{outline:2px solid var(--rn-coral);outline-offset:3px}
/* no focus ring after a mouse click; a soft brand ring only for keyboard users */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),.elementor-button:focus:not(:focus-visible){outline:none!important;box-shadow:none}
.rn-links a:focus-visible,.elementor-button:focus-visible,.rn-mmenu a:focus-visible,.rn-form a:focus-visible{outline:2px solid var(--rn-coral)!important;outline-offset:4px;border-radius:4px}
.rn-burger span{display:block;width:18px;height:1.5px;background:var(--rn-teal);transition:transform .25s,opacity .2s}
.rn-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.rn-burger.is-open span:nth-child(2){opacity:0}
.rn-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.rn-mmenu{position:fixed;left:0;right:0;bottom:0;top:72px;z-index:49;display:flex;flex-direction:column;padding:16px 24px 40px;background:var(--rn-cream);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.rn-mmenu.is-open{opacity:1;visibility:visible;transform:none}
.rn-mmenu a{font-family:var(--rn-serif);font-size:28px;line-height:1.2;color:var(--rn-teal)!important;padding:16px 0;border-bottom:1px solid var(--rn-line);text-decoration:none}
.rn-mmenu a.rn-mm-cta{margin-top:28px;border:0;border-radius:999px;background:var(--rn-teal);color:var(--rn-cream)!important;font:600 13px/1 var(--rn-sans);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:18px 28px}
body.rn-menu-open{overflow:hidden}

/* ---------- Policy / legal pages ---------- */
.rn-policy-intro{max-width:880px;margin:0 auto;width:100%}
.elementor .e-con.rn-policy-card{max-width:880px;margin:0 auto;width:100%;box-shadow:var(--rn-shadow)}
.rn-prose h2{font-family:var(--rn-serif);font-weight:400;font-size:28px;line-height:1.25;color:var(--rn-teal);margin:48px 0 14px;padding-top:32px;border-top:1px solid var(--rn-line)}
.rn-prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rn-prose p{margin:0 0 16px!important}
.rn-prose ul{margin:0 0 20px;padding-left:22px}
.rn-prose li{margin:0 0 8px;padding-left:4px}
.rn-prose li::marker{color:var(--rn-coral)}
.rn-prose li p{margin:0!important}
.rn-prose strong{color:var(--rn-teal);font-weight:600}
.rn-prose em{font-style:italic}
.rn-prose a{color:var(--rn-bronze);text-decoration:underline;text-underline-offset:3px}
mark.rn-todo{background:var(--rn-peach);color:var(--rn-bronze);padding:1px 6px;border-radius:4px;font-weight:600}

/* ---------- Tablet & mobile ---------- */
@media (max-width:1024px){
  .elementor .e-con.rn-hero::before{width:100%!important;height:55%!important;inset:auto 0 0 auto!important;border-top-left-radius:240px!important}
  .rn-expect{position:relative!important;left:auto;right:auto;bottom:auto;width:440px!important;max-width:calc(100% - 64px);margin:-120px 32px 0 auto!important}
  .rn-chip{right:24px;top:24px}
  .rn-nav{display:none!important}
  .rn-burger,.rn-burger:hover,.rn-burger:focus{display:inline-flex}
}
@media (max-width:767px){
  .rn-form .rn-row{grid-template-columns:1fr}
  .rn-header .rn-btn-sm{display:none!important}
  .rn-footer .rn-links .elementor-icon-list-items{align-items:flex-start}
  /* buttons: full width, centred label */
  .elementor-widget.rn-btn-primary,.elementor-widget.rn-btn-secondary{width:100%!important;max-width:100%!important;flex:0 0 100%}
  .rn-btn-primary .elementor-button,.rn-btn-secondary .elementor-button{display:flex;width:100%;justify-content:center}
  /* hero: floating card sits under the photo instead of covering it */
  .rn-expect{position:relative!important;left:auto;right:auto;bottom:auto;width:auto!important;max-width:none;margin:-56px 14px 0!important}
  .rn-chip{right:14px;top:14px}
  .rn-chip p{font-size:14px}
  /* About credentials: centred */
  .elementor .e-con.rn-cred{flex-direction:column!important;align-items:center!important;text-align:center;gap:10px!important}
  .rn-cred .elementor-icon-wrapper{text-align:center}
  .rn-cred .e-con{align-items:center}
  /* Team: photo fills the card width */
  .elementor .e-con.rn-team-card{gap:20px!important}
  .rn-team-card .rn-portrait,.rn-team-card .rn-portrait .elementor-widget-container{width:100%!important}
  .rn-team-card .rn-portrait img{width:100%!important;height:340px!important;max-width:none!important;border-radius:14px!important}
  .rn-team-card .rn-card,.rn-team-card .e-con{width:100%}
  .rn-form{gap:16px}
  .rn-form h3{font-size:24px}
  .rn-prose h2{font-size:23px;margin-top:36px;padding-top:24px}
}

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.rn-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- Scroll progress ---------- */
.rn-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:100000;background:linear-gradient(90deg,var(--rn-coral),var(--rn-peach-deep));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- Reveal on scroll ---------- */
.rn-js [data-rn-reveal]{opacity:0;transform:translate3d(0,28px,0)}
.rn-js [data-rn-reveal].is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),clip-path 1.1s cubic-bezier(.65,0,.35,1);transition-delay:var(--rn-d,0ms)}
/* headings: rise out of an invisible mask */
.rn-js [data-rn-reveal="mask"]{opacity:1;clip-path:inset(0 0 100% 0);transform:translate3d(0,22px,0)}
.rn-js [data-rn-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}
/* section labels: short slide from the left */
.rn-js [data-rn-reveal="side"]{transform:translate3d(-14px,0,0)}
/* photos: wipe up while settling from a slight zoom */
.rn-js [data-rn-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0 round 20px)}
.rn-js [data-rn-reveal="wipe"].is-in{clip-path:inset(0 0 0 0 round 20px)}
.rn-js [data-rn-reveal="wipe"] img{transform:scale(1.08)}
.rn-js [data-rn-reveal="wipe"].is-in img{transform:none;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) var(--rn-d,0ms)}

/* ---------- Hero intro (CSS only, runs on first paint) ---------- */
@keyframes rnUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes rnFade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes rnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rn-js #hero .rn-label,.rn-js #hero .rn-hero-h,.rn-js #hero .rn-lead,.rn-js #hero .rn-btn{animation:rnUp .9s cubic-bezier(.2,.7,.2,1) both}
.rn-js #hero .rn-hero-h{animation-delay:.08s}
.rn-js #hero .rn-lead{animation-delay:.18s}
.rn-js #hero .rn-btn{animation-delay:.28s}
.rn-js #hero .rn-btn-secondary{animation-delay:.36s}
.rn-js #hero .rn-hero-img{animation:rnFade 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.rn-js #hero .rn-expect{animation:rnUp .9s cubic-bezier(.2,.7,.2,1) .55s both}
.rn-js #hero .rn-chip{animation:rnUp .8s cubic-bezier(.2,.7,.2,1) .75s both,rnFloat 6s ease-in-out 1.6s infinite}

/* ---------- Card hover details ---------- */
.rn-card .elementor-icon{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rn-card:hover .elementor-icon{transform:rotate(-8deg) scale(1.06)}
.rn-team-card .rn-portrait img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rn-team-card .rn-portrait .elementor-widget-container{overflow:hidden;border-radius:16px}
.rn-team-card:hover .rn-portrait img{transform:scale(1.04)}

/* ---------- Reduced motion: keep fades, drop movement ---------- */
@keyframes rnFadeOnly{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rn-js [data-rn-reveal],.rn-js [data-rn-reveal="mask"],.rn-js [data-rn-reveal="side"]{transform:none}
  .rn-js [data-rn-reveal] img{transform:none!important}
  .rn-js [data-rn-reveal].is-in{transition:opacity .7s ease,clip-path 1s cubic-bezier(.65,0,.35,1);transition-delay:var(--rn-d,0ms)}
  .rn-js #hero .rn-label,.rn-js #hero .rn-hero-h,.rn-js #hero .rn-lead,.rn-js #hero .rn-btn,
  .rn-js #hero .rn-hero-img,.rn-js #hero .rn-expect,.rn-js #hero .rn-chip{animation-name:rnFadeOnly!important;animation-duration:.7s!important;animation-iteration-count:1!important}
  .rn-card:hover .elementor-icon,.rn-team-card:hover .rn-portrait img{transform:none}
}