/*
 Theme Name:   Kettania Theme
 Theme URI:    https://www.kettania.ma/
 Description:  A custom WordPress theme.
 Author:       Ilyass & Zakaria
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         rtl-language-support, two-columns, right-to-left
 Text Domain:  kettania
*/

/* ---= Global & Body Styles =--- */
body {
    background-image: url('images/bgbody.png');
    background-repeat: repeat;
    font-family: 'Tahoma', 'Arial', sans-serif;
    font-size: 14px;
    color: #444;
    direction: rtl;
    margin: 0;
    padding: 0;
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: initial;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(230, 210, 160);
}

a {
    color: #8c7853;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #000;
}
.entry-content p,.entry-content li{
	line-height:150%;
	font-size:16px;
	text-align:justify;
}
/* ---= Layout & Main Container =--- */
.container {
    position: relative;
    width: max-content;
    height: auto;
    margin: 20px auto;
    background-image: url('images/milieu.png');
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.main-content {
    width: 68%;
}

.sidebar {
    width: 30%;
}

/* ---= Header =--- */
.site-headerr {
    width: 100%;
    height: 200px;
    background-image: url('images/bondeau1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: relative;
}

/* ---= Navigation Bar =--- */
.main-navigationn {
    position: absolute;
    top: 160px;
    right: 5px;
}

.main-navigationn ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.main-navigationn ul li {
    position: relative;
}

.main-navigationn ul li a {
    display: block;
    padding: 12px 15px;
    color: #594a2a;
    font-weight: bold;
    font-size: 15px;
}

/* ---= Content & Post Styles =--- */
.post-box {
    padding: 20px;
}

.entry-title {
    font-size: 20px;
    color: #6a5a3a;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px dotted #c7bda6;
    padding-bottom: 10px;
}

.entry-title a {
    color: #6a5a3a;
}

/* .entry-content p {
    line-height: 1.8;
} */

.entry-content img {
    max-width: 100%;
    height: auto;
    padding: 4px;
}

/* ---= Sidebar Widget Styles =--- */
.widget {
    border: 1px solid #d4cbb8;
    margin-bottom: 20px;
}

.widget-title {
    background-image: url('https://www.kettania.ma/templates/kettania2/images/fond_titre.png');
    background-repeat: repeat-x;
    background-color: #d6ccb3;
    color: #594a2a;
    padding: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #d4cbb8;
}

.widget ul {
    list-style: none;
    padding: 10px;
    margin: 0;
    background-color: #ece4cf;
}

.widget ul li {
    padding: 8px 5px;
    border-bottom: 1px dotted #c7bda6;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    display: block;
}

/* ---= Footer =--- */
.site-footer {
    height: 30px;
    border-top: 1px solid #000000;
    font-size: 14px;
    margin-top: -18px;
    padding-top: -7px;
    padding-right: 25px;
    font-weight: bold;
    color: black;
    background-image: linear-gradient(#d7b671, #f5ecdb);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.bg_cat {
    background-image: url('images/bgbas.png');
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: initial;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-origin: initial;
    background-clip: initial;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
}

/* ---= Homepage 3-Column Layout Styles =--- */
.homepage-content {
    display: flex;
    justify-content: space-between;
}

#col_droite {
    width: 169px;
    /* Width from your images */
    flex-shrink: 0;
}

.main-content-area {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 180px);
    /* Calculate remaining width */
}

#col_gauche {
    width: 145px;
    /* Width from your images */
    flex-shrink: 0;
}

#col_milieu {
    width: calc(100% - 160px);
    /* Calculate remaining width */
}


/* ===============================================
   GLOBAL 3-COLUMN LAYOUT (Corrected for Size)
   =============================================== */

.global-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    /* This is the fix for making columns equal height */
}

.global-sidebar-left {
    width: 145px;
    flex-shrink: 0;
    order: 1;
}

.dynamic-middle-column {
    /* This is the fix for an explicit width */
    width: calc(100% - 145px - 169px - 30px);
    /* Total width - sidebars - padding */
    order: 2;
    padding-left: 15px;
    padding-right: 15px;
}

.global-sidebar-right {
    width: 169px;
    flex-shrink: 0;
    order: 3;
    margin-right: -7px;
}

/* This part remains the same */
.global-sidebar .widget {
    border: none;
    background: none;
    padding: 0;
    margin-bottom: 0;
    margin-top: -10px;
}

.global-sidebar .widget-title {
    display: none;
}

/* ===============================================
   STYLE FOR INNER PAGE CONTENT HEIGHT
   =============================================== */

/* This makes the middle column a flex container itself */
.dynamic-middle-column {
    display: flex;
    flex-direction: column;
    margin-right: 7px;
    margin-top: -13px;
}

/* This makes the <main> element inside it grow */
.dynamic-middle-column main#main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* This makes the article/post-box itself grow to fill the <main> element */
.dynamic-middle-column main#main article.post-box {
    flex-grow: 1;
    padding-top: 0;
}

/* ===============================================
   =============================================== */

/* ---= Homepage Widget Styles =--- */
/* This ensures the widgets don't have the extra boxy style from inner pages */
#col_droite .widget,
#col_gauche .widget,
#col_milieu .widget {
    border: none;
    background: none;
    margin-bottom: 0;
    padding: 0;
}

#col_droite .widget-title,
#col_gauche .widget-title,
#col_milieu .widget-title {
    display: none;
    /* We don't need titles for these custom HTML widgets */
}

.main-navigationn ul.menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.homepage-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#col_droite {
    width: 169px;
    flex-shrink: 0;
    order: 3;
}

#col_gauche {
    width: 145px;
    flex-shrink: 0;
    order: 1;
}

#col_milieu {
    width: 100%;
    order: 2;
    padding-left: 15px;
    padding-right: 15px;
}

.main-content-area {
    width: auto;
}


body.home .main-content,
body.home .sidebar {
    float: none;
    width: auto;
}

.dynamic-middle-column {
    width: 567px;

}

.animation_area {
    height: 140px;
}

.img_homepage {
    display: flex;
}

.ultp-block-848f5c .ultp-block-content-wrap {
    background: none !important;
}

.ultp-block-content {
    position: relative;
}

.ultp-block-title {
    border: 1px solid #D7B671;
    background-image: url('images/bgtitrearticle.png');
    background-repeat: no-repeat;
    overflow: hidden;
    border: 1px solid #D7B671;
    width: 511px;
}

.ultp-block-title a {
    margin-right: 35px;
}

.ultp-block-excerpt {
    background-image: url('images/bgtextearticle.png');
    padding: 10px;

}

.ultp-block-readmore {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.entry-content table {
    margin-top: -30px;
    margin-right: 60px;
    text-align: center;
    font-weight: bold;
}

.entry-content center {
    display: block;
    unicode-bidi: isolate;
    background: url('images/bgtextearticle.png');
    background-repeat: no-repeat;
    margin-top: -20px;
    text-align: center;
    color: #403F3C;
    font-size: 17px;
    font-weight: bold;
    line-height: 5px;
}

.special-post .ultp-block-title {
    background-image: none;
    border: none;
}

.special-post .ultp-block-title a {
    margin: 0
}

.special-post .ultp-block-excerpt {
    background-image: none;
    border: none;
    padding-top: 0px;
}

.special-post2 .ultp-block-title {
    background-image: none;
    border: none;
}

.special-post2 .ultp-block-title a {
    margin-right: 40px;
}

.special-post2 .ultp-block-excerpt {
    background-image: none;
    border: none;
}

.parent-special-post {
    background-image: url('images/bgtextearticle.png');
    background-size: cover;
    height: 200px;
    position: relative;
    margin-right: 4px;
}

.mazid {
    display: flex;
    flex-direction: row-reverse;
    color: #810b0b;
    font-weight: bold;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.ultp-block-6004e0 .ultp-block-wrapper {
    margin-top: -20px;
}

.entry-header {
    margin-top: 20px;
}

.a-index {
    color: black;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.a2-index {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;
    color: #890404;
    font-size: smaller;
}

.wp-block-image {
    width: 150px;
    height: 150px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: 0;
}

figure.wp-block-gallery.has-nested-images {
    direction: ltr;
}

.album-page .ultp-block-items-wrap {
    row-gap: 10px;
}

.album-page .wp-block-ultimate-post-post-list-3 .ultp-block-wrapper {
    margin-top: -30px;
    margin-bottom: 10px;
}

.album-page .ultp-block-title {
    border: none;
    background: none;
    color: black;
    width: 415px;
    direction: rtl;
}

.album-page .ultp-block-excerpt {
    background: none !important;
    padding: 0 !important;
    margin-right: 20px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.album-page {
    height: 100px;
    display: flex;
    position: relative;
    align-items: self-start;
    border: solid .5px rgb(208, 208, 208);
    padding: 10px;
    box-shadow: 1px 1px 2px 1px rgba(120, 120, 120, 0.5), inset 0px 0px 7px 7px rgba(240, 240, 240, 0.2);
    margin-bottom: 10px;
}

.album-page .ultp-block-content {
    margin-top: 15px;
    margin-right: 160px;
    width: 400px;
}

.album-page figure img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.album-page .ultp-block-content .ultp-block-excerpt p {
    direction: rtl;
    line-height: 20px;
}

article#post-499 .entry-content {
    margin-top: -20px;
}

.mob-menu-header-holder .mobmenu {
    display: flex;
    justify-content: space-around;
}

.mobmenul-container {
    right: 92%;
}

.mobile-widget {
    display: none;
}

.mob-widget-center {
    display: none;
}

.search-field {
    height: 25px;
    padding: 10px 12px;
    border: 1px solid #9f8f65;
    background-color: #ede6d5;
    color: #5C4033;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-submit {
    height: 22px;
    padding: 10px 14px;
    background-color: #9f8f65;
    color: #6a5026;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-submit:hover {
    background-color: #6a5026;
    color: #9f8f65;
}

.search-field:focus,
.search-submit:focus {
    border-color: #6a5026;
}

.search-field:focus-visible,
.search-submit:focus-visible {
    outline: 2px solid #6a5026;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ede6d5;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}


@media only screen and (max-width: 768px) {

    body,
    html {
        overflow-x: hidden;
    }

    body {
        margin-right: 0 !important;
    }

    .mobmenu-right-panel {
        display: none !important;
    }

    body.show-nav-right .mobmenu-right-panel {
        display: block !important;
    }

    /* Hide desktop sidebars */
    aside#secondary-left,
    aside#secondary-right,
    #col_droite,
    #col_gauche {
        display: none;
    }

    .container {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .site-headerr {
        border-radius: 0;
    }

    /* Stack main layout containers vertically */
    .content-wrapper,
    .global-content-wrapper,
    .homepage-content,
    /* HOMEPAGE FIX */
    .main-content-area {
        /* HOMEPAGE FIX */
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* --- FIX FOR WIDE CONTENT ON ALL PAGES --- */
    .dynamic-middle-column,
    #col_milieu {
        /* Added homepage middle column */
        width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 0;
    }

    /* --- HOMEPAGE FIX: Stack the two portrait images --- */
    .img_homepage {
        flex-direction: column;
        align-items: center;
    }

    /* --- FIX FOR WIDE SEARCH INPUT --- */
    .main-navigationn form {
        display: flex;
        justify-content: center;
        padding: 10px;
    }

    .main-navigationn input[type="search"] {
        width: 75%;
        max-width: 300px;
    }

    /* Adjust post title background image */
    .ultp-block-title {
        width: auto;
        background-size: 100% 100%;
    }

    .mob-widget-center {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-around;
        margin-top: 42px;
        margin-bottom: -10px;
    }

    .mobile-widget {
        display: block;
    }

    .parent-special-post,
    .ultp-block-e72820 .ultp-block-wrapper .ultp-block-item {
        margin-top: 15px;
    }

    .album-page .ultp-block-media .ultp-block-content-wrap .ultp-block-content {
        padding-top: 20px;
    }


    .album-page .ultp-block-content {
        width: 425px;
        height: 120px;
    }

    .album-page .ultp-block-title {
        width: 420px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;
    }

    .album-page a {
        font-size: medium;
    }

    .wp-block-media-text {
        display: block !important;
        margin: 0 0 0 0;
    }

    .entry-content center {
        padding: 0;
        margin: 0;
        background-size: cover;
    }

    .entry-content p {
        margin: 0;
        padding: 0;
        line-height: 1.6;
    }

    .entry-content table {
        border-collapse: separate;
        border-spacing: 0 10px;
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
    }

    .entry-content td {
        padding: 10px 20px;
        border-radius: 5px;
    }
}

@media only screen and (max-width: 600px) {
    .album-page .ultp-block-content {

        width: 325px;
        height: 120px;
    }

    .album-page .ultp-block-title {
        width: 320px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;
    }

    .album-page a {
        font-size: medium;
    }

}

@media only screen and (max-width: 490px) {
    .bottom-cards {
        flex-direction: column;
        align-items: center;
    }

    .parent-special-post,
    .ultp-block-e72820 .ultp-block-wrapper .ultp-block-item {
        width: 95% !important;
        height: auto;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .animation_area {
        width: 360px !important;
        flex: none !important;
        margin: 0 15px 50px auto !important;
    }

    .media-bloc {
        width: auto;
        flex-direction: column-reverse;
    }

    .img_homepage {
        margin: 0 0 0 100px;
    }

    .ultp-block-db535a .ultp-block-wrapper,
    .ultp-block-53aef6 .ultp-block-wrapper {
        margin-right: 0;
    }

    img#titre_moustajadate {
        display: block;
        margin: 0 auto;
    }

    .entry-header {
        margin-right: 0;
        padding: 0 10px;
    }

    .ultp-block-content {
        margin-right: 0;
    }

    .album-page .ultp-block-content {

        width: 260px;
        height: 120px;

    }

    .album-page .ultp-block-title {
        width: 260px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;

    }

    .album-page a {
        font-size: medium;
    }
}

@media only screen and (max-width: 425px) {
    .search-field {
        max-width: 175px;
    }

    .animation_area {
        width: 300px !important;
        margin: 0 20px 20px auto !important;
    }

    .img_homepage {
        margin: 0 0 0 150px;
    }

    .album-page .ultp-block-content {

        width: 190px;
        height: 120px;

    }

    .album-page .ultp-block-title {
        width: 190px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;
    }

    .album-page a {
        font-size: medium;
    }
}

@media only screen and (max-width: 375px) {
    .search-field {
        max-width: 130px;
    }

    .animation_area {
        width: 260px !important;
        margin: 0 20px 0 auto !important;
    }

    .img_homepage {
        margin: 0 0 0 200px;
    }

    .album-page .ultp-block-content {

        width: 140px;
        height: 120px;
    }

    .album-page .ultp-block-title {
        width: 139px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;
    }

    .album-page a {
        font-size: medium;
    }
}

@media only screen and (max-width: 320px) {
    .search-field {
        max-width: 100px;
    }

    .search-submit {
        padding: 0px 7px !important;
    }

    .animation_area {
        width: 240px !important;
        margin: 0 20px 0 auto !important;
    }

    .img_homepage {
        margin: 0 0 0 240px;
    }

    .album-page .ultp-block-content {

        width: 122px;
        height: 120px;
    }

    .album-page .ultp-block-title {
        width: 120px;
    }

    .album-page .ultp-block-d259d8 .ultp-block-excerpt p {
        font-size: small;
    }

    .album-page a {
        font-size: medium;
    }
}

@media only screen and (max-width: 280px) {
    .album-page figure img {
        display: none !important;
    }
}